/*
 * This is a manifest file that'll be compiled into application.css, which will include all the files
 * listed below.
 *
 * Any CSS and SCSS file within this directory, lib/assets/stylesheets, vendor/assets/stylesheets,
 * or vendor/assets/stylesheets of plugins, if any, can be referenced here using a relative path.
 *
 * You're free to add application-wide styles to this file and they'll appear at the bottom of the
 * compiled file so the styles you add here take precedence over styles defined in any styles
 * defined in the other CSS/SCSS files in this directory. It is generally better to create a new
 * file per style scope.
 *
 *= require selectize
 *= require pickadate/classic
 *= require pickadate/classic.date
 *= require pickadate/classic.time
 *= require froala_editor.min
 *= require froala_style.min
 *= require plugins/code_view.min
 *= require plugins/file.min
 *= require plugins/fullscreen.min
 *= require plugins/image.min
 *= require plugins/image_manager.min
 *= require plugins/table.min
 *= require plugins/video.min
 *= require themes/gray.min
 *= require font-awesome
 *= require_self
 */

@import "foundation_and_overrides";

html.turbolinks-progress-bar::before {
  background-color: $primary-color !important;
  height: 3px !important;
  z-index: 9;
}

/* Overrides and extensions to Foundation */

[class^="fi-"], [class~=" fi-"] {
  &:before {
    font-size:          1.25em;
  }
}

.top-bar {
  .logo {
    margin-top:         -3px;
  }
  .active a {
    font-weight:        $font-weight-bold;
  }
  .has-dropdown > a, .has-dropdown > a:hover {
    background:         $white !important;
  }
  .dropdown {
    border:             1px solid $silver;
    border-top:         none;
  }
}

.button i {
  margin-right:         rem-calc(5);
}

.reveal-modal-bg {
  z-index:              1005;
}
.reveal-modal, dialog {
  z-index:              1006;
}

table {
  width:                100%;
  td p:last-child {
    margin-bottom:      0;
  }
}

/* Custom styles */

%block-link-bg {
  display:              block;
  @include single-transition(background-color, 200ms);

  &:hover {
    background-color:   scale-color($primary-color, $lightness: 95%);
  }
}

.header {
  position:             fixed;
  top:                  0;
  left:                 0;
  z-index:              5;
  width:                100%;
  height:               rem-calc(60);
  background-color:     $white;
  border-bottom:        1px solid $silver;
}

.main {
  padding-top:          rem-calc(80);
}

.container {
  position:             relative;
  margin-bottom:        rem-calc(20);
  background-color:     $white;
  border:               1px solid $crumb-border-color;
  @include radius($global-radius);

  .head {
    position:           absolute;
    top:                0;
    left:               0;
    width:              100%;
    height:             rem-calc(40);
    background-color:   $white;
    border-bottom:      1px solid $crumb-border-color;
    @include radius($global-radius $global-radius 0 0);
    overflow:           hidden;

    .btn {
      height:           100%;
      width:            rem-calc(40);
      line-height:      rem-calc(40);
      text-align:       center;
      
      a {
        @extend %block-link-bg;
      }
      &.left {
        border-right:   1px solid $crumb-border-color;
      }
      &.right {
        border-left:    1px solid $crumb-border-color;
      }
    }
    .title {
      display:          inline;
      padding:          rem-calc(0 15);
      font-size:        rem-calc(14);
      line-height:      rem-calc(40);
      color:            $oil;
    }
    .right .button {
      margin:           rem-calc(6 10 0 0)
    }
  }
  .body {
    height:             calc(100% - 40px);
    margin-top:         rem-calc(40);
  }
  .padded {
    padding:            rem-calc(20 15);
  }
  .headless {
    margin-top:         0;
  }
}

.node-list {
  @extend .no-bullet;
  margin:               0;
  .sortable-placeholder {
    background-color: scale-color($warning-color, $lightness: 95%);
    border-bottom:    1px solid $crumb-border-color;
    &:last-child {
      border-bottom:  none;
    }
  }
}

.node-list-item {
  position:             relative;
  border-bottom:        1px solid $crumb-border-color;

  &:last-child {
    border-bottom:      none;
  }
  > a {
    display:            block;
    @include single-transition(background-color, 200ms);
    &:hover {
      background-color: scale-color($primary-color, $lightness: 97.5%);
      .title {
        color:          scale-color($primary-color, $lightness: -12%);
      }
    }
  }
  .title {
    height:             rem-calc(40);
    padding:            rem-calc(10 15 6);
    line-height:        rem-calc(24);
    font-size:          rem-calc(18);
    color:              $tuatara;
    overflow:           hidden;
    white-space:        nowrap;
  }
  .meta {
    height:             rem-calc(40);
    padding:            rem-calc(0 15 0);
    line-height:        rem-calc(40);
    font-size:          rem-calc(13);
    color:              $aluminum;
    .label {
      margin-right:     rem-calc(10);
    }
  }
  .buttons, .descendants {
    position:           absolute;
    top:                0;
    right:              0;
    bottom:             0;
    line-height:        rem-calc(40);
    text-align:         center;
    border-left:        1px solid $crumb-border-color;
    a {
      @extend %block-link-bg;
      color:            $primary-color;
    }
  }
  .buttons {
    width:              rem-calc(40);
    a, span {
      display:          block;
      width:            100%;
      height:           rem-calc(40);
      color:            $gainsboro;
      &:first-child {
        border-bottom:  1px solid $crumb-border-color;
      }
    }
    a.alert {
      color:            $alert-color;
    }
    a.success {
      color:            $success-color;
    }
  }
  .descendants {
    width:              rem-calc(90);
    .icon {
      height:           rem-calc(40);
      padding-top:      rem-calc(10);
      font-size:        rem-calc(24);
    }
    .meta {
      padding:          0 !important;
    }
  }
  &.actionable {
    padding-right:      rem-calc(40);
  }
  &.descendable {
    padding-right:      rem-calc(90);
  }
  .handle {
    position:           absolute;
    top:                6px;
    left:               6px;
    bottom:             6px;
    width:              rem-calc(19);
    background-color:   $white-smoke;
    cursor:             move;
    @include single-transition(background-color, 200ms);
    &:hover {
      background-color: $gainsboro;
    }
  }
  .sortable & {
    .title, .meta {
      padding-left:     rem-calc(40);
    }
    &.sortable-dragging {
      background-color: $white;
      border:           1px solid $primary-color;
      box-shadow:       10px 10px 10px #000 !important;
      .handle {
        background-color: $primary-color;
      }
    }
  }
}

.taxonomies-list-item {
  position:             relative;
  background-color:     $white;
  border:               1px solid $crumb-border-color;
  @include radius($global-radius);

  > a {
    display:            block;
    @include single-transition(background-color, 200ms);
    &:hover {
      background-color: scale-color($primary-color, $lightness: 97.5%);
      .title {
        color:          scale-color($primary-color, $lightness: -12%);
      }
    }
  }
  .title {
    padding:            rem-calc(20 15);
    line-height:        rem-calc(28);
    font-size:          rem-calc(18);
    color:              $tuatara;
    overflow:           hidden;
    white-space:        nowrap;
  }
  .meta {
    height:             rem-calc(40);
    padding:            rem-calc(0 15 0);
    line-height:        rem-calc(40);
    font-size:          rem-calc(13);
    color:              $aluminum;
    border-top:         1px solid $crumb-border-color;
    .label {
      margin-right:     rem-calc(10);
    }
  }
}

.taxonomy-term-list, .nested-taxonomy-term-list {
  margin:               0;
  list-style:           none;
}

.nested-taxonomy-term-list {
  border-top:           1px solid $crumb-border-color;
  padding-left:         rem-calc(40);
  &:empty {
    border-top:         none;
  }
  .taxonomy-term-item {
    .show, form {
      border-left:      1px solid $crumb-border-color;
    }
  }
  .taxonomy-term-item, .angular-ui-tree-placeholder {
    &:before, &:after {
      position:         absolute;
      right:            100%;
      top:              0;
      content:          ' ';
      display:          block;
      width:            rem-calc(23);
      border-left:      6px solid $crumb-border-color;
    }
    &:before {
      height:           rem-calc(43);
      border-bottom:    6px solid $crumb-border-color;
    }
    &:after {
      bottom:           -1px;
    }
    &:last-child:after {
      display:          none;
    }
  }
}

.taxonomy-term-item {
  position:             relative;
  border-bottom:        1px solid $crumb-border-color;

  &:last-child {
    border-bottom:      none;
  }
  .show {
    position:           relative;
  }
  .title {
    height:             rem-calc(40);
    padding:            rem-calc(10 15 6 40);
    line-height:        rem-calc(24);
    font-size:          rem-calc(18);
    color:              $tuatara;
    overflow:           hidden;
    white-space:        nowrap;
  }
  .meta {
    height:             rem-calc(40);
    padding:            rem-calc(0 15 0 40);
    line-height:        rem-calc(40);
    font-size:          rem-calc(13);
    color:              $aluminum;
    .label {
      margin-right:     rem-calc(10);
    }
  }
  .buttons, .edit {
    position:           absolute;
    top:                0;
    right:              0;
    bottom:             0;
    line-height:        rem-calc(40);
    text-align:         center;
    border-left:        1px solid $crumb-border-color;
    a {
      @extend %block-link-bg;
      color:            $primary-color;
    }
  }
  .buttons {
    width:              rem-calc(40);
    a, span {
      display:          block;
      width:            100%;
      height:           rem-calc(40);
      color:            $gainsboro;
      &:first-child {
        border-bottom:  1px solid $crumb-border-color;
      }
    }
    a.alert {
      color:            $alert-color;
    }
    a.success {
      color:            $success-color;
    }
  }
  .edit {
    width:              rem-calc(90);
    .icon {
      height:           rem-calc(40);
      padding-top:      rem-calc(10);
      font-size:        rem-calc(24);
    }
    .meta {
      padding:          0 !important;
    }
  }
  .handle {
    position:           absolute;
    top:                6px;
    left:               6px;
    height:             rem-calc(68);
    width:              rem-calc(19);
    background-color:   $white-smoke;
    cursor:             move;
    @include single-transition(background-color, 200ms);
    &:hover {
      background-color: $gainsboro;
    }
  }
  form {
    overflow:           auto;
    padding-top:        rem-calc(16);
  }
}

.angular-ui-tree-empty, .angular-ui-tree-hidden {
  display:              none;
}

.angular-ui-tree-placeholder {
  position:             relative;
  width:                auto !important;
  border-bottom:        1px solid $crumb-border-color;
  background-color:     scale-color($warning-color, $lightness: 95%);
  &:last-child {
    border-bottom:      none;
  }
}

.angular-ui-tree-drag {
  position:             absolute;
  background-color:     $white;
  border:               1px solid $primary-color;
  box-shadow:           10px 10px 10px #000 !important;
  pointer-events:       none;
  opacity:              .9;
  > li > div > .show .handle {
    background-color:   $primary-color;
  }
}

.user-list-item {
  position:             relative;
  background-color:     $white;
  border:               1px solid $crumb-border-color;
  @include radius($global-radius);

  > a {
    display:            block;
    @include single-transition(background-color, 200ms);
    &:hover {
      background-color: scale-color($primary-color, $lightness: 97.5%);
      .title {
        color:          scale-color($primary-color, $lightness: -12%);
      }
    }
  }
  .avatar {
    position:           absolute;
    top:                rem-calc(10);
    left:               rem-calc(10);
    width:              48px;
    height:             48px;
    font-size:          rem-calc(22);
    line-height:        46px;
    text-align:         center;
    color:              $success-color;
    background-color:   $white;
    border:             1px solid $info-color;
    @include radius(24px);
  }
  .title {
    height:             rem-calc(60);
    padding:            rem-calc(20 15 0 70);
    line-height:        rem-calc(28);
    font-size:          rem-calc(18);
    color:              $tuatara;
    overflow:           hidden;
    white-space:        nowrap;
  }
  .meta {
    height:             rem-calc(40);
    padding:            rem-calc(0 15 0);
    line-height:        rem-calc(40);
    font-size:          rem-calc(13);
    color:              $aluminum;
    .label {
      margin-right:     rem-calc(10);
    }
  }
}

.asset-list-item {
  background-color:     $white;
  border:               1px solid $crumb-border-color;

  > a {
    display:            block;
    @include single-transition(background-color, 200ms);
    &:hover {
      background-color: scale-color($primary-color, $lightness: 97.5%);
      .title {
        color:          scale-color($primary-color, $lightness: -12%);
      }
    }
  }
  .preview img {
    border-bottom:      1px solid $crumb-border-color;
  }
  .title {
    height:             rem-calc(64);
    padding:            rem-calc(8 15);
    font-size:          rem-calc(16);
    line-height:        rem-calc(24);
    color:              $tuatara;
    overflow:           hidden;
  }
}

.panel {
  @include radius($global-radius);
  .submit, .cta {
    .button:last-of-type {
      margin:           0;
    }
  }
}

.side-panel {
  background-color:     $panel-bg;
  border:               1px solid $crumb-border-color;
  @include radius($global-radius);

  .padded, .cta, .submit {
    padding:            $panel-padding;
  }
  .cta, .submit {
    background-color:   $white;
    @include radius(0 0 $global-radius $global-radius);
    .button {
      margin:           0;
    }
  }
  .text-button {
    text-align:         center;
    margin-top:         rem-calc(20);
    color:              $aluminum;
    a {
      color:            $primary-color;
    }
    &.success a {
      color:            $success-color;
    }
    &.alert a {
      color:            $alert-color;
    }
  }
  .asset-upload {
    margin-top:         rem-calc(20);
  }
  .side-nav {
    padding:            rem-calc(24 0);
    .heading {
      padding:          rem-calc(0 14);
    }
  }
}

.meta-table {
  display:              table;
  width:                100%;
  font-size:            rem-calc(14);
  border-spacing:       0 3px;
  color:                $oil;

  .meta-row {
    display:            table-row;
  }
  .key, .value {
    display:            table-cell;
  }
  .key {
    width:              25%;
    padding-right:      rem-calc(10);
  }
  .value {
    padding:            rem-calc(3 9);
    background:         $vapor;
    color:              $jumbo;
    border:             1px dotted $gainsboro;
    @include radius($global-radius);
    .button {
      margin:           0;
    }
  }
  .editable {
    color:              $oil;
    cursor:             pointer;
    &:hover {
      color:            $primary-color;
      background:       $ghost;
    }
  }
}

.pagination-stats {
  margin-bottom:        rem-calc(9);
  font-size:            rem-calc(12);
  text-transform:       uppercase;
  color:                $oil;
}

.dashboard {
  margin-top:           rem-calc(40);
  padding:              rem-calc(80 0);
  border:               6px dashed $gainsboro;

  h1 {
    font-family:        $code-font-family;
    text-align:         center;
    color:              $gainsboro;
  }
}

.empty-default {
  padding:              rem-calc(38 50);
  border:               1px solid $crumb-border-color;
  color:                $oil;
  background-color:     $white;

  .container & {
    padding:            rem-calc(14 50 10);
    border:             none;
  }
}

/* Form stuff */

input[type="text"], input[type="password"], input[type="date"], input[type="datetime"], input[type="datetime-local"], input[type="month"], input[type="week"], input[type="email"], input[type="number"], input[type="search"], input[type="tel"], input[type="time"], input[type="url"], input[type="color"], textarea {
  font-weight:          300;
  line-height:          1.5em;
}

textarea {
  min-height:           7.5em;
}

form .title {
  input[type="text"] {
    margin-bottom:      rem-calc(8);
    font-size:          rem-calc(23);
    font-weight:        700;
  }
  .error input[type="text"] {
    margin-bottom:      0;
  }
}

form .permalink {
  .columns {
    opacity:            0;
  }
  .visible {
    opacity:            1 !important;
    @include single-transition(opacity, 500ms);
  }

  .key, .value {
    margin-right:       8px;
    color:              $form-label-font-color;
  }
  .key {
    font-size:          $form-label-font-size;
    line-height:        rem-calc(30);
    font-weight:        $font-weight-bold;
  }
  .value {
    display:            inline-block;
    min-width:          50%;
    padding:            rem-calc(0 8);
    font-size:          0;
    line-height:        0;
    background-color:   $ghost;
    border:             1px dashed $silver;
    @include radius($global-radius);
    span {
      font-size:        rem-calc(14);
      line-height:      rem-calc(30);
    }
  }
}

.error-icon {
  display:              inline;
  font-size:            $form-label-font-size;
  color:                $alert-color;
  i {
    font-size:          rem-calc(18);
    vertical-align:     middle;
  }
}

#publish-date-fields {
  max-width:            360px;
}

form .publish-date {
  select {
    display:            inline;
    width:              auto;
    padding-right:      rem-calc(20);
    font-size:            rem-calc(12);
  }
}

form .asset-upload {
  margin-bottom:        rem-calc(20) !important;
}

.asset-upload {
  .dropzone {
    height:             175px;
    padding:            $panel-padding;
    border:             4px dashed $crumb-border-color;
    @include single-transition(border-color, 200ms);

    .prompt, .icon {
      text-align:       center;
    }
    .prompt {
      color:            $aluminum;
      font-style:       italic;
    }
    .icon {
      margin-top:       rem-calc(24px);
      font-size:        rem-calc(48px);
      color:            $gainsboro;
      @include single-transition(color, 200ms);
    }

    &.hover {
      background-color: scale-color($primary-color, $lightness: 97.5%);
      border-color:     $primary-color;
      .icon {
        color:          $primary-color;
      }
    }
  }
  .preview {
    border:             1px solid $table-border-color;
  }
}

%field-module {
  margin:               rem-calc(0 0 16);
  border:               1px solid $input-border-color;
  .error small.error, &.error {
    margin-bottom:      0;
  }
  label {
    color: $form-label-font-color;
  }
  .error label {
    color: $alert-color;
  }
}

.asset-field {
  @extend %field-module;
  padding:              rem-calc(8);
  box-shadow:           $input-box-shadow;

  .preview {
    border:             1px solid $table-border-color;
  }
  .button {
    margin-top:         0;
    margin-bottom:      0;
  } 
}

.repeater-field {
  @extend %field-module;

  table {
    margin:             0;
    border:             none;
  }
  .remove {
    width:              rem-calc(40);
    text-align:         center;
    a {
      color:            $alert-color;
    }
  }
  .plus {
    padding: 0.5625rem 0.625rem;
  }
  .button, input, select, textarea, label, .selectize-control, %field-module {
    margin:             0;
  }
  textarea {
    min-height:         4em;
  }
}

.markdown textarea {
  height:               400px;
  font-family:          $font-family-monospace;
}

.date, .time {
  input[readonly] {
    background: white;
    cursor: pointer;
    &.picker__input--active {
      background-color: $input-focus-bg-color;
      border-color: $input-focus-border-color;
    }
  }
  .picker {
    margin-top: -#{ rem-calc(17) };
  }
  .error .picker, .repeater-field & .picker {
    margin-top: 0;
  }
  .picker__footer {
    padding-bottom: 0.75em;
    button {
      margin-bottom: 0;
      border-bottom: none;
      &:before {
        margin-right: rem-calc(8);
      }
    }
  }
  .picker__button--today {
    color: $primary-color;
    &:hover {
      background-color: scale-color($primary-color, $lightness: 85%);
    }
  }
  .picker__button--clear {
    color: $alert-color;
    &:hover {
      background-color: scale-color($alert-color, $lightness: 85%);
    }
  }
  .picker__button--close {
    color: $monsoon;
    &:hover {
      background-color: scale-color($monsoon, $lightness: 85%);
    }
  }
  .picker__list {
    padding-bottom: 0.75em;
  }
  .picker__list-item {
    small {
      float: right;
      line-height: 2.75em;
      color: $aluminum;
    }
  }
}

.selectize-input {
  min-height:           42px;
  font-size:            $input-font-size;
  line-height:          1.5em;
  color:                $input-font-color;
  background-color:     $input-bg-color;
  border-color:         $input-border-color;
  @include radius(0);

  &.focus {
    background-color:   #fff;
    border-color:       $input-focus-border-color;
    @include radius(0);
  }
  &.dropdown-active {
    background-color:   #fff;
  }
  &.dropdown-active::before {
    background:         $input-border-color;
  }

  input {
    border: 0;
    height: auto;
  }
}

.selectize-control {
  margin-bottom:        1rem;

  &.multi {
    .item {
      padding-left:       10px !important;
      padding-right:      10px !important;
      background-color:   $secondary-color;
      @include radius($label-radius);
    }
    &.plugin-remove_button .item {
      padding-right:      35px !important;
    }
    &.plugin-remove_button .remove {
      width:              25px !important;
      font-size:          16px !important;
      font-weight:        600 !important;
      color:              $base !important;
      border-left-color:  $input-border-color !important;
    }
  }

  .error & {
    margin-bottom:      0;
    line-height:        0.5em;
  }
}

.selectize-dropdown {
  font-size:            1em;
  line-height:          1.5em;
  border-color:         $input-focus-border-color;
  @include radius(0);

  .option {
    padding:            0.5rem;
    font-style:         italic;
  }
  .option.selected {
    color:              $base;
  }
}

.tabs {
  border:               1px solid $silver;
  border-bottom:        none;
  background-color:     $silver;
}

.fr-box {
  margin-bottom:        rem-calc(16);
}

.fr-toolbar {
  border-radius:        0 !important;
}

.fr-wrapper {
  border:               1px solid $input-border-color !important;
  border-radius:        0 !important;
  box-shadow:           $input-box-shadow !important;

  .focus & {
    border-color:       $input-focus-border-color !important;
  }
}

.fr-view .fr-file:after {
  display: none;
}
.fr-view .fr-file:before {
  position: relative;
  content: "\1F4CE";
  padding-right: 6px;
  font-weight: 400;
}

@import "foundation-icons";