// @import  '../colors/settings';
// @import  '../typography/settings';
// @import  'settings/sidepanel';
// @import  '../settings/z-index';
// @import  '../tools/mixins/center-block';
// @import  '../tools/mixins/clearfix';
// @import  '../tools/mixins/easing';
// @import  '../tools/mixins/spacing';
// @import  '../tools/mixins/text-hide';
// @import  '../tools/mixins/text-overflow';
// @import  '../utilities/core';
// @import  '~@momentum-ui/icons/scss/mixins';
@import '~@momentum-ui/icons/scss/symphony/variable-mapping';

$sidepanel-header-content-height: rem-calc(40);

@include exports('ng-sidepanel') {
  .sidepanel-modal:focus {
    outline: none;
  }

  .side-panel {
    position: fixed;
    top: 52px;
    right: -$side-panel-width;
    z-index: $zindex-drawer;
    width: $side-panel-width;
    height: calc(100vh - 52px);
    background: $md-white-100;
    box-shadow: 0 0 3px 2px rgba(0, 0, 0, 0.2);

    @include easing-transition(all, 500ms, $ease);

    .sidepanel-modal.in & {
      transform: translateX(-$side-panel-width);
    }

    &.large {
      width: $side-panel-large-width;
      border: 1px solid $md-gray-30;
      box-shadow: none;
    }

    .feature {
      display: flex;
      padding: 0 $side-panel-padding;
      margin: 0 #{-$side-panel-padding};
      line-height: $feature-line-height;

      a {
        display: flex;
        padding: 0 $side-panel-padding;
        margin: 0 #{-$side-panel-padding};
        line-height: $feature-line-height;
        color: $md-gray-70;
        text-decoration: none;
        cursor: pointer;
        flex: 1;

        @include easing-transition(all, 150ms, $linear);

        &:hover,
        &:focus,
        &:active {
          color: $md-theme-50;
          text-decoration: none;

          .feature-details,
          .feature-status {
            color: $md-theme-50;
          }
        }

        .feature-arrow {
          @include icon;

          width: auto;
          font-size: rem-calc(24);
          line-height: $feature-line-height;

          &:before {
            @include icon-arrow-right_24;
          }
        }

        &:hover,
        &:focus {
          background-color: rgba($md-gray-10, 0.75);
        }
      }

      .feature-icon {
        @include icon;

        font-size: 1rem;
        line-height: $feature-line-height;

        &:before {
          margin-right: rem-calc(14);
          line-height: $feature-line-height;
        }
      }
    }

    /**
   * SIDE PANEL CLOSE
   */
    .side-panel-close {
      position: absolute;
      top: rem-calc(16);
      right: rem-calc(16);

      .panel-close {
        line-height: 1;

        &:before {
          font-size: rem-calc(16);
        }

        &:focus {
          outline: none;
        }
      }
    }

    /**
   * SIDE PANEL HEADER
   */
    .side-panel-header {
      display: flex;
      height: $side-panel-header-height;
      padding: $side-panel-padding $side-panel-padding rem-calc(20);
      border-bottom: 1px solid $md-gray-30;
    }

    .header-image {
      width: $sidepanel-header-content-height;
      height: $sidepanel-header-content-height;
      margin-right: rem-calc(16);

      .icon {
        font-size: $sidepanel-header-content-height;
        line-height: 1;
        opacity: 0.5;
      }

      .user-img .icon {
        font-size: rem-calc(20);
        line-height: 2;
        opacity: inherit;
      }
    }

    .user-img {
      width: $sidepanel-header-content-height;
      height: $sidepanel-header-content-height;
    }

    .header-info {
      display: flex;
      width: 100%;
      height: $sidepanel-header-content-height;
      min-width: 0;
      align-items: center;

      .feature-arrow {
        padding-top: 5px;
        padding-bottom: 5px;
        line-height: 1;
      }

      .header-info-wrap {
        width: 100%;
      }
    }

    .header-title {
      display: flex;
      // padding-top: rem-calc(2);
      margin-bottom: rem-calc(6);
      font-family: $brand-font-light;
      font-size: rem-calc(16);
      line-height: 1;
      color: $md-gray-70;
      align-items: center;

      span {
        font-size: inherit;
      }

      > span {
        @include text-overflow;

        max-width: 80%;
      }
    }

    .edit-button {
      font-size: rem-calc(16);
      color: $md-gray-40;

      @include vr-spacing(ml, 0.25);

      &:hover {
        color: $md-theme-50;
      }
    }

    .header-sub-info {
      position: relative;
      font-family: $brand-font-light;
      font-size: rem-calc(12);
      line-height: 1;
      color: $md-gray-70;

      @include text-overflow;
    }

    /**
   * SIDEPANEL CONTAINER
   */
    md-sp-container {
      position: relative;
      display: block;
    }

    /**
   * BREADCRUMBS
   */
    .breadcrumb {
      padding: 10px 0;
      margin-bottom: 0;
      font-family: $body-font-family;
      font-size: $font-size-small;

      > li {
        line-height: rem-calc(14);

        + li:before {
          font-family: $icon-font-name;
          font-size: rem-calc(14);
          color: $md-gray-70;
          vertical-align: middle;
          content: $icon-arrow-next;
        }

        > a {
          color: $md-theme-50;
          cursor: pointer;

          &:hover,
          &:focus,
          &:active {
            color: $md-gray-70;
          }
        }
      }

      .active {
        color: $md-gray-70;
      }
    }

    /**
   * SIDE PANEL SECTION
   */
    .side-panel-section {
      padding-bottom: rem-calc(14);
      color: $md-gray-70;
      border-bottom: 1px solid $md-gray-30;
    }

    .section-name {
      margin-right: rem-calc(24);
      font-family: $brand-font-regular;
      font-size: rem-calc(14);
    }

    .feature-list {
      ul {
        padding: 0;
        margin: 0;
        list-style: none;
      }
    }

    .feature-name {
      margin: 0;
      font-family: $brand-font-light;
      font-size: rem-calc(14);
      font-weight: 550;
      line-height: inherit;
      color: $md-gray-70;
      flex: 1;
    }

    .section-title-row {
      display: flex;
      padding: rem-calc(24) 0 rem-calc(12);
      font-family: $brand-font-regular;
      color: $md-gray-70;
      align-items: center;
      justify-content: space-between;

      a {
        &:focus,
        &:active {
          color: $md-theme-50;
          text-decoration: none;
        }

        &:hover {
          text-decoration: none;
        }
      }

      &.feature-inline {
        padding-bottom: 0;
      }
    }

    .section-content {
      font-family: $brand-font-light;
      font-size: rem-calc(14);
      line-height: 1.4;
      color: $md-gray-70;
    }

    .feature-details,
    .feature-status {
      font-family: $body-font-family;
      font-size: rem-calc(12);
      color: $md-gray-50;
    }

    .feature-status {
      padding-right: 10px;
      line-height: inherit;
    }

    .feature-details {
      padding-left: 10px;
      line-height: inherit;
    }

    /**
   * SIDE PANEL BUTTONS
   */
    .button-container {
      position: absolute;
      top: -1px;
      z-index: $zindex-popover;
      display: flex;
      width: 100%;
      padding: 5px 25px;
      background-color: $md-gray-10;
      border-top: 1px solid $md-gray-30;
      border-bottom: 1px solid $md-gray-30;
      opacity: 1;
      transform: translateY(0);
      justify-content: flex-start;
      flex-direction: row-reverse; // TODO: Remove after reordering buttons in Atlas

      @extend .clearfix;

      button {
        margin: 0 0 0 0.5rem;
      }

      // TODO: Remove after reordering buttons in Atlas
      .ng-hide-add.ng-hide-add-active &,
      .ng-hide-remove.ng-hide-remove-active & {
        -webkit-transition: all ease 0.5s;
        transition: all ease 0.5s;
      }

      .ng-hide & {
        opacity: 0;
        transform: translateY(-50);
      }
    }

    /**
   * SIDE PANEL VIEW
   */
    .side-panel-view {
      position: absolute;
      top: 0;
      right: 0;
      height: auto;
      background-color: $md-white-100;

      &.ng-enter,
      &.ng-leave {
        @include easing-transition(all, 500ms, $ease);
      }

      &.ng-enter,
      &.ng-leave.ng-leave-active {
        transform: translateX($side-panel-width);
      }

      &.ng-leave,
      &.ng-enter.ng-enter-active {
        transform: translateX(0);
      }
    }

    .form-group {
      padding-right: 0;
      padding-left: 0;
    }
  }

  /**
 * SIDE PANEL END
 */

  .side-panel-container {
    width: $side-panel-width;
    height: calc(100vh - #{$side-panel-header-height});
    padding: 0 $side-panel-padding $side-panel-padding;
    overflow-x: auto;
    background: $md-white-100;
  }

  .large {
    .side-panel-container {
      width: $side-panel-container-large-width;
    }

    .side-panel-view {
      &.ng-enter,
      &.ng-leave.ng-leave-active {
        transform: translateX($side-panel-view-large-transition);
      }
    }
  }

  .side-panel-full-height {
    top: 0;
    height: 100vh;
    box-shadow: 0 0 3px 0px rgba(0, 0, 0, 0.2);
  }

  @media (max-width: $side-panel-width) {
    .side-panel,
    .side-panel-container {
      width: 100vw;
    }
  }
}