@import '../../popup/style/component.scss';

@mixin pickerStackColumn($count) {
  @for $i from 1 through $count {
    &:nth-child(#{$i}) {
      z-index: $i * 2;

      @if ($i > 2) {
        left: r(60 * ($i - 2));
      }

      @include e(stack-column-wrapper) {
        z-index: $i * 2 + 1;

        @if ($i > 1) {
          left: r(60);
        }
      }

      @include e(stack-item) {
        @if ($i > 2) {
          padding-left: r(10);
        }
      }
    }
  }
}

@include b(stackpicker) {
  width: 100%;
  height: 100%;
  background: inherit;

  @include e(input) {
    width: 100%;
    padding: var(--picker-padding-v) 0;
  }

  @include e(placeholder) {
    color: var(--placeholder-color);
  }

  @include m(disabled) {
    color: var(--disabled-color);
  }

  @include e(wrapper) {
    background: var(--picker-background);
  }

  @include e(header) {
    display: flex;
    align-items: center;
    justify-content: center;
    position: relative;
    width: 100%;
    color: var(--color-text);
    height: var(--picker-header-height);
    font-size: var(--picker-header-font-size);
    line-height: var(--picker-header-line-height);
    @include onepx(bottom);
  }

  @include e(cancel,submit) {
    flex: 1;
    padding: 0 var(--picker-padding-h);
    cursor: pointer;
  }

  @include e(cancel) {
    color: #999;
  }

  @include e(submit) {
    text-align: right;
    color: var(--theme-primary);
  }

  @include e(mask-top) {
    -webkit-mask: -webkit-gradient(linear, 0% 40%, 0% 0%, from(rgba(222, 187, 71, 1)), to(rgba(36, 142, 36, 0)));
  }

  @include e(mask-bottom) {
    -webkit-mask: -webkit-gradient(linear, 0% 60%, 0% 100%, from(rgba(222, 187, 71, 1)), to(rgba(36, 142, 36, 0)));
  }

  @include e(column-group) {
    display: flex;
    align-items: center;

    @include e(item) {
      flex: 1;
      text-align: center;
    }
  }

  @include e(crumbs) {
    position: relative;
    padding: var(--picker-padding-v) var(--picker-padding-h);
    line-height: var(--stackpicker-crumbs-line-height);
    font-size: var(--stackpicker-crumbs-font-size);
    color: var(--color-text-caption);
    background: var(--background-body);
    @include onepx(bottom);

    p {
      margin: 0;
    }
  }

  @include e(crumbs-error) {
    color: var(--theme-error);
  }

  @include e(group) {
    position: relative;
    height: calc(8 * var(--stackpicker-stackitem-height));
    overflow: hidden;
    background: var(--background-body);
  }

  @include e(stack-column) {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    transform: translate(0, 0);
    transition: transform .3s;

    @include m(hidden) {
      ~ .za-stack-picker-stack-column {
        transform: translate(100%, 0);
      }

      @include e(item) {
        padding-left: r(20);
      }
    }

    @include pickerStackColumn(5);

    &:not(:last-child) {
      @include e(item) {
        padding-right: r(40);

        &:before {
          position: absolute;
          right: r(15);
          top: 50%;
          content: '';
          width: r(9);
          height: r(9);
          margin-top: r(-4);
          border-right: r(2) solid #c7c7cc;
          border-top: r(2) solid #c7c7cc;
          transform: rotate(45deg);
        }
      }
    }

    &:first-child:last-child,
    &:nth-child(2):last-child {
      @include e(item) {
        padding-left: r(20);
      }
    }
  }

  @include e(stack-column-wrapper) {
    position: absolute;
    top: 0;
    left: 0;
    right: r(-20);
    bottom: 0;
    padding-right: r(20);
    overflow-y: scroll;
    box-shadow: 0 0 r(10) rgba(0, 0, 0, .3);
  }

  @include e(stack-column-item) {
    position: relative;
    padding: 0 r(10);
    line-height: var(--stackpicker-stackitem-height);
    font-size: r(16);
    color: var(--color-text);
    transition: padding-left .4s;
    white-space: nowrap;
    text-overflow: ellipsis;
    overflow: hidden;
    @include onepx(bottom);

    @include m(active) {
      color: var(--theme-primary);
    }
  }
}