/* 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;

$base-font-color: #2e2e2e !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;

$list-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;
}

a {
  color: $positive-color;
}

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

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

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

.header {
  background-color : rgba(255,255,255,.9);
}

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

.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 : rgba($base-font-color, .4);
}

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

  &: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 .55em;
    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,
.icon-reorder,
.icon-folder {
  color: lighten($base-font-color, 50%);
}

.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: $list-bg-color;
  }

  .signin-modal {
    background : $white-color;
    max-width  : 26em;
    border     : 1px solid $border-color;
    margin     : 5em auto 1em;

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

  .list {
    background-color : $list-bg-color;
    .header {
      background-color : $list-bg-color;
    }
    &.list-aside {
      background-color : $white-color;
      .header {
        background-color : $white-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); }
}