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

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

$light   : 300 !default;
$regular : 400 !default;
$medium  : 500 !default;
$bold    : 600 !default;
$black   : 800 !default;

$base-font-color : rgb( 89, 89, 89) !default;
$positive-color  : rgb( 74,135,238) !default;
$assertive-color : rgb(239, 78, 58) !default;
$border-color    : rgb(246,246,246) !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;
  &.active { background-color: $border-color; }
}

.header a {
  &:hover {
    opacity : .5;
  }
}

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

.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;
  }
}

/* Icons ------------------------------------------------------------------- */

.search .icon { @include icon-search($positive-color); }
.list-search .search .icon { @include icon-search(lighten($base-font-color, 40%)); }

.header .new { @include icon-plus($positive-color); }

.item .icon-reorder { @include icon-reorder(lighten($base-font-color, 50%)); }
.item .icon-folder  { @include icon-folder(lighten($base-font-color, 50%)); }

.slip-reordering > .icon-reorder:before,
.slip-reordering > .icon-reorder:after { background-color: $positive-color; }

.header .back, .header .close { @include icon-arrow($positive-color); }

/* Layouts ----------------------------------------------------------------- */

@media #{$tablet} {
  .sidebar { border-color: $border-color; }
}

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