// size
$slot-item-height = 40px;
$slot-columns-height = 48px;
// border color
$slot-border-color = hsvTransform($basic-600, 0, 0, -2);
// background color
$slot-header-bgcolor = hsvTransform($basic-100, 0, 0, -3);
$slot-body-bgcolor = $basic-100;
$slot-item-pressed-bgcolor = white;
// text color
$slot-primary-color = rgba(0, 0, 0, 0.8);
$slot-secondary-color = rgba(31, 56, 88, 0.6);
$slot-confirm-color = $brand-primary;
$slot-disabled-color = rgba(31, 56, 88, 0.3);
// font
$slot-header-font-size = 16px;
$slot-option-font-size = $font-size-t4;

.{$prefix}-cascade-slot-header-wrap {
  background-color: $slot-body-bgcolor;
  color: $slot-primary-color;
  font-size: 16px;

  h1 {
    height: $slot-item-height;
    line-height: $slot-item-height;
    text-align: center;
    font-size: 17px;
  }

  button {
    background: none;
    border: none;
    padding: 0;
    margin-top: 2px;
  }

  button:first-child {
    color: $slot-secondary-color;
    margin-left: 15px;
  }

  button:last-child {
    color: $slot-confirm-color;
    margin-right: 15px;

    &:disabled {
      color: $slot-disabled-color;
    }
  }
}

.{$prefix}-cascade-slot-body-wrap {
  background-color: #fff;
  font-size: 16px;

  .{$prefix}-tab {
    border: none;
  }

  .{$prefix}-tab-bar {
    hairline('border-bottom', transparent);

    .{$prefix}-tab-tab {
      border: none;
      max-width: 20%;
      font-size: 16px;

      > .title {
        white-space: nowrap;
        text-overflow: ellipsis;
        overflow: hidden;
        width: 100%;
        text-align: center;
      }
    }
    .{$prefix}-tab-ink-bar {
      bottom: -1px;
    }
  }

  .{$prefix}-tab-all {
    display: none !important;
  }

  .{$prefix}-tab-content {
    height: 7 * $slot-columns-height !important;
  }
}

.{$prefix}-cascade-slot-list {
  hairline('border-top', $normal-alpha-7);
  background-color: $slot-body-bgcolor;
  padding: 10px 0;
  -webkit-overflow-scrolling: touch;

  li {
    button {
      height: $slot-columns-height;
      // line-height: $slot-columns-height;
      text-overflow: ellipsis;
      white-space: nowrap;
      padding: 0 15px;
      margin: 0;
      border: none;
      background: none;
      outline: none;
      display: block;
      width: 100%;
      text-align: left;
      -webkit-tap-highlight-color: $normal-alpha-8;

      &:active,
      &.active {
        background-color: $slot-item-pressed-bgcolor;
        font-weight: bold;
      }

      .{$prefix}-icon {
        margin-left: 5px;
        vertical-align: middle;
        margin-top: -2px;

        svg {
          fill: $slot-confirm-color;
        }
      }

      > .text {
        display: inline-block;
        max-width: 270px;
        vertical-align: middle;
        overflow: hidden;
        text-overflow: ellipsis;
      }
    }
  }
}