@import 'blaze/blaze';
@import url('https://fonts.googleapis.com/css?family=Roboto');

// main variables
$bg-footer: #dfdfdf !default;             // bg footer bar
$bg-form1: #f4f4f4 !default;              // bg 1st level forms
$bg-form2: darken($bg-form1, 3%) !default;  // bg 2nd level forms (nested)
$bg-form3: darken($bg-form1, 6%) !default;  // bg 3rd level forms (nested)
$bg-form4: darken($bg-form1, 9%) !default;  // bg 4th level forms (nested)
$bg-form-sub-headings: lighten( $color-brand, 64% ) !default;  // bg nested forms title
$bg-header: $color-brand !default;          // bg header bar
$bg-inputs: #fff !default;                // bg forms inputs
$bg-menu-active: #7b929e !default;        // bg menu item current / hover
$bg-sidebar: #efefef;                     // bg sidebar
$fg-box-title: #fff !default;
$fg-button-link: #fff !default;
$fg-menu-items: #f8f8f8 !default;
$fg-table-borders: #e4e4e4 !default;
$fg-table-link: #eee !default;

// other variables
$form-padding: 10px !default;
$inputs-spacing: 10px !default;
$height-inputs: 26px !default;
$height-topbar: 40px !default;
$height-titlebar: 38px !default;
$text-shadow: #000 !default;

// active_admin theme styles
body.active_admin {
  font-family: 'Roboto', sans-serif;
  font-size: 12px;
  min-height: 100vh;

  // generics
  .button-base {
    @extend .c-button;
    // @extend .c-button--rounded;
    background-image: none;
    box-shadow: initial;
    text-shadow: $text-shadow 0 1px 0;
  }

  // forms
  form {
    // inputs
    input[type='datetime-local'],
    input[type='email'],
    input[type='number'],
    input[type='password'],
    input[type='search'],
    input[type='tel'],
    input[type='text'],
    input[type='url'],
    select,
    textarea {
      @extend .c-field;
      background-color: $bg-inputs;
      display: inline-block;
      height: $height-inputs;
      padding: 1px 6px;
    }
    input[type='radio'] {
      margin-right: 0.4em;
    }
    input[type='range'] {
      @extend .c-range;
      background: transparent;
      display: inline-block;
      height: $height-inputs;
      min-width: 200px;
      width: 30%;
    }
    select {
      padding: 1px 2px;
    }
    select[multiple], textarea {
      height: auto;
    }
    textarea {
      padding: 6px;
    }
    .selectize-input {
      line-height: $height-inputs;
      padding-left: 8px;
    }
    abbr {
      padding-left: 3px;
    }

    // buttons
    button,
    input[type='button'],
    input[type='submit'],
    &.filter_form a.clear_filters_btn,
    fieldset.buttons li.cancel a,
    fieldset.actions li.cancel a {
      @extend .button-base;
    }
    .buttons, .actions {
      button,
      input[type='button'],
      input[type='submit'] {
        margin-right: 10px;
      }
    }
    button:hover,
    input[type='button']:hover,
    input[type='submit']:hover,
    &.filter_form a.clear_filters_btn:hover,
    fieldset.buttons li.cancel a:hover,
    fieldset.actions li.cancel a:hover {
      background-image: none;
    }
    > .actions {
      margin: 5px 0 0 0;
    }

    // submits
    input[type='submit'] {
      @extend .c-button--success;
    }

    // custom fields
    .blaze_toggle {
      label {
        display: inline-block;
      }
    }

    // filter forms
    &.filter_form {
      .filter_form_field {
        > input, > select, .separator, .seperator {
          float: left;
        }
        > label {
          padding-top: 8px;
        }
        .separator, .seperator {
          line-height: $height-inputs;
        }
      }
      .filter_form_field.filter_date_range {
        input[type='datetime-local'],
        input[type='email'],
        input[type='number'],
        input[type='password'],
        input[type='search'],
        input[type='tel'],
        input[type='text'],
        input[type='url'], {
          max-width: 100px;
          width: auto;
        }
      }
      .filter_form_field.select_and_search select {
        background-color: $bg-inputs;
      }
      .buttons {
        clear: both;
        padding-top: 14px;
      }
    }

    // fieldsets
    fieldset {
      &.buttons li, &.actions li {
        float: initial;
        display: inline-block;
      }
      &.inputs {
        background-color: transparent;
        box-shadow: none;
        padding: 0;
        input[type='datetime-local'],
        input[type='email'],
        input[type='number'],
        input[type='password'],
        input[type='search'],
        input[type='tel'],
        input[type='text'],
        input[type='url'],
        select,
        textarea {
          background-color: $bg-inputs;
          width: calc(80% - 22px);
        }
        select {
          background-image: none;
        }
        label {
          line-height: $height-inputs;
        }
        // .boolean > label {  // not working
        //   @extend .c-field;
        //   @extend .c-field--choice;
        // }
        .button {
          @extend .button-base;
          &.has_many_add {
            @extend .c-button--info;
            display: inline-block;
            &:hover {
              background-image: none;
            }
          }
          &.has_many_remove {
            @extend .c-button--error;
            display: inline-block;
            &:hover {
              background-image: none;
            }
          }
        }
        .fragment {
          input[type='datetime-local'],
          input[type='email'],
          input[type='number'],
          input[type='password'],
          input[type='search'],
          input[type='tel'],
          input[type='text'],
          input[type='url'],
          select {
            width: auto;
          }
        }
      }
      > ol {
        padding: 0;
        > li {
          padding: 0 0 $inputs-spacing 0;
          &.boolean label, &.blaze_toggle label {
            float: none;
          }
          &.has_many_container {
            padding: $form-padding;
            .has_many_fields {
              margin: 0;
            }
          }
        }
      }
    }
    > fieldset.inputs, .ui-tabs-panel > fieldset.inputs {
      > legend {
        @extend .c-card__item;
        @extend .c-card__item--brand;
        border-radius: 5px 5px 0 0;
        box-shadow: 0 0 1px rgba(17, 17, 17, 0.6), 0 5px 10px -3px rgba(17, 17, 17, 0.4);
        color: $fg-box-title;
        padding: 8px 11px;
        text-shadow: $text-shadow 0 1px 0;
        > span {
          background-color: transparent;
          background-image: none;
          border: 0 none;
          box-shadow: initial;
          color: inherit;
          margin: 0;
          padding: 0;
          text-shadow: inherit;
        }
      }
      > ol {
        @extend .c-card;
        @extend .u-high;
        background-color: $bg-form1;
        border-radius: 0 0 5px 5px;
        padding: $form-padding;
        > .has_many_container {
          background-color: $bg-form2;
          > fieldset > ol > .has_many_container {
            background-color: $bg-form3;
            > fieldset > ol > .has_many_container {
              background-color: $bg-form4;
            }
          }
        }
      }
      .has_many_container {
        @extend .c-card;
        @extend .u-high;
        border-left: 2px solid lighten( $color-brand, 20% );
        border-radius: 0;
        box-shadow: none;
        padding: 0;
        h3 {
          @extend .c-card__item;
          // @extend .c-card__item--info;
          background: $bg-form-sub-headings;
          padding: 10px;
        }
        .inputs {
          padding: $form-padding;
        }
        > .button {
          margin-left: $form-padding;
          margin-bottom: $form-padding;
        }
      }
      .choices-group li.choice {
        display: inline-block;
        margin-right: 10px;
      }
    }

    // tabs
    .ui-tabs > .tab-content {
      padding-bottom: 0;
      padding-top: 25px;
    }

    // misc
    a.c-button {
      color: $fg-button-link;
      text-decoration: none;
    }
  }

  // header
  #header {
    background-color: $bg-header;
    background-image: none;
    border-bottom: 0 none;
    padding: 0;
    position: relative;
    .header-item {
      top: 0;
    }
    .site_title {
      color: $fg-menu-items;
      padding-top: 0;
      padding-bottom: 0;
      img {
        max-height: $height-topbar;
        max-width: 250px;
        // top: -1px;
        vertical-align: middle;
      }
    }
    ul.tabs {
      li {
        height: $height-topbar;
        line-height: $height-topbar;
      }
      li > a {
        color: $fg-menu-items;
        height: $height-topbar;
        line-height: $height-topbar;
      }
      li:hover, li.current {
        background: $bg-menu-active;
      }
      > li.has_nested {
        > a {
          background-color: transparent;
          border-bottom: 0;
        }
        > ul {
          background: lighten( $bg-header, 5% );
          border-radius: 0;
          padding: 0;
          margin: 0;
          a {
            line-height: 2em;
          }
          li:hover {
            background: $bg-menu-active;
          }
        }
      }
    }
  }

  // pagination
  nav.pagination {
    @extend .c-pagination;
    span > a {
      background: transparent;
      background-image: none;
      border: 0 none;
      box-shadow: none;
      color: initial;
      cursor: pointer;
      padding: 6px 10px;
      margin: 0 auto;
      text-shadow: none;
    }
    a:hover, span:hover > a {
      background: transparent;
      background-image: none;
      color: #fff;
      text-shadow: none;
    }
    .first, .prev, .next, .last {
      @extend .c-pagination__control;
      display: inline-block;
      margin-right: 2px;
      padding: 0;
    }
    .prev {
      margin-right: 16px;
    }
    .next {
      margin-left: 14px;
    }
    .page {
      @extend .c-pagination__page;
      display: inline-block;
      margin-right: 2px;
      padding: 0;
      &.current {
        @extend .c-pagination__page--current;
        background-image: none;
        padding: 6px 10px;
      }
      &.current:hover {
        background-image: none;
      }
      &.gap {
        border: 0 none;
      }
      &.gap:hover {
        background-color: transparent;
        color: initial;
        cursor: default;
      }
    }
  }

  // navbar / menu
  #tabs, #utility_nav {
    @extend .c-nav;
    @extend .c-nav--inline;
    background-color: $bg-header;
    > li {
      @extend .c-nav__item;
      float: left;
      margin: 0;
      &.current {
        @extend .c-nav__item--active;
        > a {
          background: transparent;
        }
      }
      > a {
        display: block;
        padding: 0;
      }
      > a:hover {
        background: transparent;
      }
    }
    > li:hover > a {
      background: transparent;
    }
  }
  #utility_nav {
    position: absolute;
    right: 0;
    width: auto;
  }

  // sidebars
  #sidebar {
    background: $bg-sidebar;
    min-height: calc(100vh - #{$height-topbar + $height-titlebar + 2 + 40});
    padding: 0 15px;
    .sidebar_section {
      margin-bottom: 20px;
    }
  }
  #active_admin_content > #sidebar, #active_admin_content > #main_content_wrapper {
    float: none;
  }
  .sidebar_section {
    @extend .c-card;
    @extend .u-high;
    .filter_form_field {
      input[type='datetime-local'],
      input[type='email'],
      input[type='number'],
      input[type='password'],
      input[type='search'],
      input[type='tel'],
      input[type='text'],
      input[type='url'],
      select,
      textarea {
        background-color: $bg-inputs;
        background-image: none;
      }
    }
    .panel_contents {
      @extend .c-card__item;
      padding: 5px 10px 10px 10px;
    }
    > h3 {
      @extend .c-card__item;
      @extend .c-card__item--brand;
      background-image: none;
      border: 0 none !important;
      color: $fg-box-title;
      margin-bottom: 0;
      padding: 8px 11px;
      text-shadow: $text-shadow 0 1px 0;
    }
    input[type='submit'] {
      @extend .c-button--info;
    }
  }

  // tables
  .table_tools {
    a {
      @extend .button-base;
      margin-right: 10px;
      span {
        color: $fg-table-link;
      }
    }
    a:hover,
    a.table_tools_button:hover,
    .dropdown_menu_button:hover {
      background-image: none;
    }
    .dropdown_menu_list a {
      width: 100%;
    }
  }
  .index_table {
    th {
      background-image: none;
      background-color: #eee;
      border: 0 none;
      box-shadow: 0 1px 3px rgba(0, 0, 0, 0.3), 0 0 1px #fff inset;
    }
    tbody > tr > td:first-child {
      border-left: 1px solid $fg-table-borders;
    }
    tbody > tr > td {
      border-right: 1px solid $fg-table-borders;
    }
    .col.col-selectable > div {
      text-align: center;
    }
  }
  .index_as_table {
    overflow-x: scroll;
  }
  .panel_contents table tr:last-child {
    > td, > th {
      border-bottom: 0 none;
    }
  }

  // title bar
  #title_bar {
    background-image: none;
    box-shadow: none;
    padding-top: 0;
    padding-bottom: 0;
    .breadcrumb {
      float: left;
      font-size: 1em;
      line-height: initial;
      margin: 0;
      padding: 0;
      > a, > a:link, > a:visited, > a:active {
        opacity: 0.7;
      }
    }
    .action_items span.action_item {
      > a,
      > .dropdown_menu > a {
        @extend .button-base;
        @extend .c-button--info;
      }
      > a:hover,
      > .dropdown_menu > a:hover {
        background-image: none;
      }
      a[data-method='delete'] {
        @extend .c-button--error;
      }
    }
    #page_title {
      display: inline-block;
      float: left;
      font-size: 1em;
      // font-size: 2em;
      line-height: initial;
      margin-left: 5px;
    }
    #titlebar_left, #titlebar_right {
      height: $height-titlebar;
    }
  }

  // main content
  #main_content {
    margin: 0;
    padding: 25px 20px;
    width: calc(100% - 270px);
    > .panel {
      @extend .c-card;
      @extend .u-high;
      > h3 {
        @extend .c-card__item;
        @extend .c-card__item--brand;
        background-image: none;
        border: 0 none !important;
        color: $fg-box-title;
        padding: 8px 11px;
        text-shadow: $text-shadow 0 1px 0;
      }
      > .panel_contents .actions {
        margin: 0;
      }
      table {
        margin: 0;
      }
    }
  }

  // admin content
  #active_admin_content {
    display: flex;
    padding: 0;
  }
  &.logged_out #active_admin_content {  // devise forms
    display: block;
  }

  // dialogs
  .ui-dialog > .ui-dialog-buttonpane button.ui-button {
    @extend .button-base;
    margin-right: 10px;
    &:hover {
      background-image: none;
    }
  }

  // footer
  #footer {
    bottom: 0;
    position: absolute;
    background-color: $bg-footer;
    line-height: 20px;
    padding: 10px;
    text-align: center;
    width: 100%;
    > p {
      margin: 0;
      padding: 0;
    }
  }

  // misc
  .download_links > a {
    @extend .c-button;
    @extend .c-button--info;
    @extend .u-small;
  }
  .ui-datepicker {
    > .ui-datepicker-header {
      border-bottom: 0 none;
      border-radius: 0;
      height: auto;
      margin: 0;
      padding: 8px 10px;
      width: 100%;
    }
    .ui-datepicker-calendar th {
      padding: 3px 0;
    }
    > .ui-datepicker-calendar {
      left: 0;
      width: 100%;
      a {
        text-decoration: none;
      }
    }
  }
  // textarea comments
  #active_admin_comment_body {
    width: 100%;
  }

  // boolean values
  .status_tag {
    min-width: 30px;
    display: inline-block;
    text-align: center;
    &.no {
      background-color: $color-error;
    }
    &.yes {
      background-color: $color-success;
    }
  }

  // misc
  #active_admin_content.without_sidebar #main_content_wrapper #main_content {
    width: 100%;
  }
  #wrapper {
    display: block;
    min-height: 100vh;
    padding-bottom: 40px;  // footer height
    position: relative;
  }

  // optional customizations
  .compact_titlebar {
    white-space: initial;
  }
  .sidebar_left {
    #main_content_wrapper {
      order: 2;
      width: calc( 100% - 270px );
      #main_content {
        width: 100%;
      }
    }
    #sidebar {
      order: 1;
      margin-left: 0;
    }
  }
  table.scrollable_cells {
    th, td {
      max-width: 200px;
      overflow: scroll;
    }
  }
  .ckeditor_width_fix {
    display: inline-block;
    width: calc(80% - 22px);
  }
}