@import "../settings/colors";

@import "../tools/mixins/easing";

/* ---------- HEADER PUSH ---------- */

.top-bar-admin .right {
  .push-down-trigger {
    cursor: pointer;
    font-size: 13px;
    .cui-button.btn--header {
      top: 0;
      @include easing-transition(all, 500ms, $ease);
      position: relative;
      &.open {
        @include easing-transition(all, 500ms, $ease);
        background-color: $gray-7;
        border-bottom: none;
        box-shadow: 0px 2px 0px -1px $gray-7;
      }
    }
    .state-error,
    .state-error:focus {
      color: $red-base;
    }
    .state-warning,
    .state-warning:focus {
      color: $yellow-hover;
    }
  }
}

.push-down-container {
  @include easing-transition(all, 500ms, $easeInOutQuint);
   max-height: 0px;
   overflow: hidden;
   display: block;
  .icon-close {
    color: $gray-4;
    font-size: 26px;
    float: right;
    margin-top: 18px;
    margin-right: 8px;
    cursor: pointer;
  }
  &.open {
    max-height: none;
  }
}

.push-down-container-inner {
  padding-top: 20px;
  padding-bottom: 25px;
  padding-left: 30px;
  padding-right: 30px;
  background-color: $gray-7;
  border-bottom: solid 1px $gray-5;
}

.push-label {
  display: none;
  @media (min-width: 1070px) {
    display: inline-block;
  }
}

/* ---------- END HEADER PUSH ---------- */