/* Settings ---------------------------------------------------------------- */

$base-font-family: 'Helvetica Neue', Helvetica, Arial, 'Lucida Grande', sans-serif !default;

$thin: 100 !default;
$light: 300 !default;
$regular: 400 !default;
$medium: 500 !default;
$semibold: 600 !default;
$bold: 700 !default;
$extrabold: 800 !default;
$black: 900 !default;

$white-color: #fff !default;

$base-font-color: #2e2e2e !default;
$secondary-font-color: rgba($base-font-color, .4) !default;
$positive-color: #4a87ee !default;
$assertive-color: #e32e2e !default;
$border-color: #f1f1f1 !default;

$sidebar-color: rgba(255, 255, 255, 0.5) !default;
$sidebar-bg-color: #414d65 !default;
$sidebar-active-color: $white-color !default;
$sidebar-active-bg-color: #29354f !default;

$bg-color: #fbfbfd !default;

$formagic-base-color: $base-font-color;
$formagic-positive-color: $positive-color;
$formagic-assertive-color: $assertive-color;
$formagic-border-color: $border-color;

/* Theme ------------------------------------------------------------------- */
html {
  font-family: $base-font-family;
  color: $base-font-color;
}

body {
  background-color: $bg-color;
}

a {
  color: $positive-color;
}

.menu a {
  color: $base-font-color;
  padding: .75em 1em;
}

.header {
  background-color: $white-color;
}

.header .title {
  font-size: .9em;
}

.header .title,
.header .save {
  font-weight : $semibold;
}

.spinner {
  border-color: rgba($positive-color, 0.2);
  border-left-color: $positive-color;
}

.refresh {
  color: $border-color;
  text-align: center;

  i { @include position(relative, 4px null null null); }
  &:hover { color: rgba($base-font-color, .4); }
}

.item {
  color: $base-font-color;
  margin-top: -1px;
  &.active {
    background-color: $border-color;
    z-index: 1;
  }

  @include bottom-border($border-color);
  &:last-child { @include no-bottom-border; }
}

.item-subtitle {
  color: $secondary-font-color;
}

.view {
  background-color: $bg-color;
}

.view .header {
  box-shadow: 0 0 1px rgba(0,0,0,0.15);
}

.form {
  max-width: 44em;
  margin: 0 auto;
}

.view-delete {
  display: block;
  text-align: center;
  margin: 5em 0;
  line-height: 2.5em;
  color: $assertive-color;
  border-top: 1px solid $assertive-color;
  border-bottom: 1px solid $assertive-color;

  &:hover,
  &:active {
    background-color: $assertive-color;
    color: $white-color;
  }
}

.header-tabs {
  border : 1px solid $positive-color;

  a {
    border-right : 1px solid $positive-color;
    font-weight  : $regular;
    line-height  : 1;
    font-size    : .8em;
    padding      : .45em .75em .525em;
    color        : $positive-color;

    &:last-child {
      border-right : none;
    }

    &.active {
      background-color : $positive-color;
      color            : $white-color;
      &:hover {
        color : $white-color;
      }
    }
  }
}

.search input {
  font-size: .9em;
}

/* Sign in ----------------------------------------------------------------- */
.signin-modal {
  @include position(relative);

  .notice, .alert {
    text-align : center;
    padding    : 0 1em;
  }

  .alert {
    color : $assertive-color;
  }

  h2 {
    text-align : center;
    font-size  : 1em;
    margin     : 1em 0;
  }

  input[type=submit] {
    background-color : $white-color;
    border-radius    : .25em;
    padding          : 1em 3em;
    display          : block;
    border           : 1px solid $positive-color;
    margin           : 1.5em auto;
    color            : $positive-color;

    &:hover {
      background-color : $positive-color;
      color            : $white-color;
    }
  }

  input[type=submit] + a {
    @include position(absolute, null 1em -2em null);
  }

  .label a {
    font-size : .8em;
    float     : right;
  }
}

/* Icons ------------------------------------------------------------------- */
.list-search .search .icon,
.item {
  .icon-reorder, .icon-folder {
    color: $secondary-font-color;
  }
  .icon-reorder:hover {
    color: $positive-color;
  }
}

.header .back,
.header .close {
  &:before {
    content: 'Close';
  }
}

/* Layouts ----------------------------------------------------------------- */
@media #{$tablet} {
  .sidebar {
    background-color: $sidebar-bg-color;
  }

  .menu a {
    border-left: 2px solid $sidebar-bg-color;
    color: $sidebar-color;
    &:hover {
      background-color: $sidebar-active-bg-color;
      border-color: $sidebar-active-bg-color;
      color: $sidebar-active-color;
    }
    &.active {
      background-color: $sidebar-active-bg-color;
      border-color: $white-color;
      color: $sidebar-active-color;
    }
  }

  .admin-devise_overrides-passwords,
  .admin-devise_overrides-sessions {
    background-color: $bg-color;
  }

  .signin-modal {
    background: $white-color;
    max-width: 26em;
    margin: 5em auto 1em;
    box-shadow: 0 0 1px rgba(0,0,0,0.15);
    border: 1px solid $white-color;

    form {
      margin-left: .5em;
    }
  }

  .module-categories {
    .list:first-child {
      background-color: $bg-color;
      .header {
        background-color: $bg-color;
      }
    }
    .view .header {
      border-color: $border-color;
    }
  }
}

@media #{$desktop} {
  .list .header { border-color: $border-color; }
  .input-text textarea, .content, .items { @include custom-scrollbar(rgba($base-font-color, .25), $border-color, 3px); }
}