@import '../base/variables';

.AknColumn {
  @verticalPadding: @AknPaddingLeftColumn - 10px;
  @iconSize: @AknBottomPanelHeight - @verticalPadding * 2;
  @littleWidth: 40px;
  @scrollbarWidth: 16px;

  flex-basis: @AknSecondColumnWidth;
  width: @AknSecondColumnWidth;
  position: relative;
  transition:
    flex-basis @AknColumnTiming @AknColumnTransition,
    width @AknColumnTiming @AknColumnTransition;
  order: -10;
  background: @AknLightGray;
  border-right: 1px solid @AknBorderColor;
  flex-shrink: 0;
  height: 100%;
  z-index: 802;
  overflow: hidden;

  &:empty {
    display: none;
  }

  &-inner {
    width: @AknSecondColumnWidth;
    height: ~"calc(100% - 70px)";
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    position: absolute;
    right: 0;
    overflow-x: auto;
    transition: right @AknColumnTiming @AknColumnTransition;
  }

  &-innerTop:not(:empty),
  &-innerBottom:not(:empty) {
    padding: 0 @AknPaddingLeftColumn @AknPaddingLeftColumn @AknPaddingLeftColumn;
    line-height: 14px;
    transition:
      margin-right @AknColumnTiming @AknColumnTransition,
      margin-left @AknColumnTiming @AknColumnTransition;
  }

  &-innerTop {
    flex-grow: 1;

    &:not(:empty) {
      padding-bottom: 0;
    }
  }

  &-innerBottom:not(:empty) {
    border-top: 1px solid @AknBorderColor;
    padding-top: @AknPaddingLeftColumn;
  }

  &-block {
    &:not(:empty) {
      display: flex;
      flex-direction: column;
      margin: @AknPaddingLeftColumn 0 0 0;
    }

    &--inline:not(:empty) {
      display: flex;
      flex-direction: row;
      justify-content: space-between;
      margin-top: 15px;
      margin-bottom: -55px;
    }
  }

  &-block--inline &-subtitle {
    line-height: 38px;
    white-space: nowrap;
  }

  &-block--inline &-value {
    flex-grow: 1;
    margin-top: 2px;
    margin-bottom: -2px;
  }

  &-blockDropdown {
    flex-shrink: 0;
    flex-grow: 0;
    margin-top: 4px;
    margin-right: -16px;
  }

  &-blockDown {
    background: url("/bundles/pimui/images/icon-down.svg") no-repeat center;
    display: inline-block;
    height: 8px;
    width: 18px;
    background-size: 18px;
    margin-left: 5px;
    opacity: 0.7;
    transition: opacity 0.1s ease-in;
    cursor: pointer;

    &:hover {
      opacity: 1;
    }
  }

  &-title,
  &-subtitle {
    color: @AknGrey;
    text-transform: uppercase;
    font-size: @AknFontSizeSmall;
    line-height: 20px;
  }

  &-title {
    margin-bottom: @AknPaddingLeftColumn;
  }

  &-value {
    color: @AknDarkBlue;
    font-size: @AknDefaultFontSize;

    &--highlited {
      color: @AknLightPurple;
    }
  }

  &-part {
    &:not(:empty) {
      border-bottom: 1px solid @AknBorderColor;
      margin-top: 0;
      margin-left: -@AknPaddingLeftColumn;
      margin-right: -@AknPaddingLeftColumn;
      padding-left: @AknPaddingLeftColumn;
      padding-right: @AknPaddingLeftColumn;
      padding-bottom: 30px;
      min-height: 47px;
    }

    &--small:not(:empty) {
      padding-bottom: 17px;
      margin-top: -5px;
    }

    &--filter:not(:empty) {
      margin-top: -1px;
      padding-bottom: 16px;
      border-top: 1px solid @AknBorderColor;
      padding-top: 14px;
    }
  }

  &-navigationLink {
    display: flex;
    font-size: @AknFontSizeBig;
    margin: 0 0 13px 0;
    color: @AknDarkBlue;
    cursor: pointer;
    opacity: 0.85;
    transition: opacity 0.2s ease-in;
    line-height: 21px;
    align-items: baseline;

    &:hover {
      opacity: 1;
    }

    &--active {
      color: @AknLightPurple;
    }
  }

  &-navigation {
    position: fixed;
    margin-top: 10px;
    left: @AknMainMenuWidth + (@littleWidth - @AknDefaultButtonSize) / 2;
    opacity: 0;
    transition: opacity @AknColumnTiming @AknColumnTransition;
    z-index: 850;
  }

  &-resume {
    margin-top: 50px;
    margin-bottom: 10px;
    font-size: @AknDefaultFontSize;
  }

  &-collapseButton {
    height: @AknBottomPanelHeight;
    width: @AknSecondColumnWidth;
    background: url("/bundles/pimui/images/icon-panelClose.svg") no-repeat 20px center;
    background-size: @iconSize;
    background-color: @AknLightGray;
    cursor: pointer;
    opacity: 0.8;
    position: absolute;
    bottom:0;
    right: 0;
    border-top: 1px solid @AknBorderColor;
    transition:
      opacity 0.2s @AknColumnTransition,
      width @AknColumnTiming @AknColumnTransition,
      background-position @AknColumnTiming @AknColumnTransition;

    &:hover {
      opacity: 1;
    }
  }

  &--collapsed {
    flex-basis: @littleWidth;
    width: @littleWidth;
  }

  &--collapsed &-navigation {
    opacity: 1;
  }

  &--collapsed &-inner {
    right: -@scrollbarWidth;
  }

  &--collapsed &-innerTop,
  &--collapsed &-innerBottom {
    margin-right: @littleWidth + @scrollbarWidth;
    margin-left: -(@littleWidth + @scrollbarWidth);
  }

  &--collapsed &-collapseButton {
    width: @littleWidth;
    background-position: ((@littleWidth - @iconSize) / 2) center;
    background-image: url("/bundles/pimui/images/icon-panelOpen.svg");
  }

  &-bottomButtonContainer {
    border-top: 1px solid @AknBorderColor;
    padding: 20px;
    text-align: center;
    position: absolute;
    bottom: 0;
    width: 100%;
    margin-left: -20px;
    background: white;

    &--sticky {
      position: sticky;
      bottom: 0;
      width: ~"calc(100% + 40px)";
      background: white;
    }
  }

  &-span {
    padding-left: 4px;
  }

  &--firstColumn {
    z-index: 802;
  }
}
