$header-height: 59px;
$column-header-margin: 6px;
$divider: var(--wds-color-border-dark-secondary, var(--wsr-color-D60, #DFE5EB));
$surface: var(--wds-color-fill-surface-default, var(--wsr-color-D80, #FFFFFF));

$font-family: var(
  --wds-font-family-default,
  var(
    --wsr-font-family,
    Madefor,
    'Helvetica Neue',
    Helvetica,
    Arial,
    'メイリオ',
    'meiryo',
    'ヒラギノ角ゴ pro w3',
    'hiragino kaku gothic pro',
    sans-serif
  )
);

@mixin typography($size, $size-fb, $weight, $weight-fb, $lh, $lh-fb) {
  font-family: #{$font-family};
  font-size: var(#{$size}, #{$size-fb});
  font-weight: var(#{$weight}, #{$weight-fb});
  line-height: var(#{$lh}, #{$lh-fb});
  letter-spacing: var(--wds-font-letter-spacing-0, unset);
}

@mixin text-medium-thin {
  @include typography(
    --wds-font-size-body-medium,
    var(--wsr-text-font-size-medium, 16px),
    --wds-font-weight-regular,
    var(--wsr-font-weight-regular, 400),
    --wds-font-line-height-body-medium,
    var(--wsr-text-line-height-medium, 24px)
  );
}

@mixin text-medium-bold {
  @include typography(
    --wds-font-size-body-medium,
    var(--wsr-text-font-size-medium, 16px),
    --wds-font-weight-bold,
    var(--wsr-font-weight-bold, 700),
    --wds-font-line-height-body-medium,
    var(--wsr-text-line-height-medium, 24px)
  );
}

@mixin text-tiny-thin {
  @include typography(
    --wds-font-size-body-tiny,
    var(--wsr-text-font-size-tiny, 12px),
    --wds-font-weight-regular,
    var(--wsr-font-weight-regular, 400),
    --wds-font-line-height-body-tiny,
    var(--wsr-text-line-height-tiny, 15px)
  );
}

@mixin text-tiny-normal {
  @include typography(
    --wds-font-size-body-tiny,
    var(--wsr-text-font-size-tiny, 12px),
    --wds-font-weight-medium,
    var(--wsr-font-weight-medium, 530),
    --wds-font-line-height-body-tiny,
    var(--wsr-text-line-height-tiny, 15px)
  );
}

@mixin text-tiny-bold {
  @include typography(
    --wds-font-size-body-tiny,
    var(--wsr-text-font-size-tiny, 12px),
    --wds-font-weight-bold,
    var(--wsr-font-weight-bold, 700),
    --wds-font-line-height-body-tiny,
    var(--wsr-text-line-height-tiny, 15px)
  );
}

.time-table {
  display: flex;
  flex-direction: column;
  flex-wrap: nowrap;
  position: relative;
  width: 100%;
  overflow: auto;
  background-color: #{$surface};

  &::-webkit-scrollbar {
    height: 0;
    width: 12px;
  }

  &::-webkit-scrollbar-button {
    display: none;
    height: 6px;
  }

  &::-webkit-scrollbar-thumb {
    background-color: var(
      --wds-scrollbar-fill,
      var(--wds-color-blue-300, var(--wsr-color-B30, #A8CAFF))
    );
    background-clip: content-box;
    border-radius: var(--wds-border-radius-full, calc(3px * 2));
    border: calc((12px - var(--wds-scrollbar-width, 6px)) / 2) solid transparent;
    height: 72px;
  }

  @media (hover: hover) {
    &::-webkit-scrollbar-thumb:hover {
      background-color: var(
        --wds-scrollbar-fill-hover,
        var(--wds-color-blue-200, var(--wsr-color-B20, #5999FF))
      );
    }
  }

  &::-webkit-scrollbar-thumb:active {
    background-color: var(
      --wds-scrollbar-fill-active,
      var(--wds-color-blue-100, var(--wsr-color-B10, #116DFF))
    );
  }

  &__column {
    flex-shrink: 0;
    flex-basis: 0;
    flex-grow: 1;
    padding: 6px;
    padding-top: 0;
    box-sizing: border-box;
    min-width: 0;
    margin-top: calc(-1 * #{$header-height});

    /*
      Used as a placeholder element to make header drop shadow work correctly
      in both standard white and non-droppable states.
    */
    &::before {
      content: '';
      display: block;
      height: $header-height;
      margin-bottom: $column-header-margin;
    }
  }

  &#{&}--dragging &__column:not(#{&}__column--droppable) {
    /* stylelint-disable-next-line plugin/use-baseline -- color-mix has a literal fallback color */
    background-color: var(
      --wds-color-fill-surface-raised,
      color-mix(in srgb, var(--wsr-color-D10, #000624) 3%, transparent)
    );
  }

  &__header {
    @include text-medium-bold;

    color: var(
      --wds-color-text-standard-primary,
      var(--wsr-color-D20, #333853)
    );
    text-align: center;
    box-sizing: border-box;
    min-width: 0;
    flex-grow: 1;
    padding: 12px 6px 0 6px;
    border-top: 1px solid #{$divider};
    flex-basis: 0;
    height: $header-height;
    top: 0;
    background-color: #{$surface};

    &#{&}--active {
      border-top: 2px solid
        var(--wds-color-text-primary, var(--wsr-color-B10, #116DFF));
      color: var(--wds-color-text-primary, var(--wsr-color-B10, #116DFF));
    }

    &#{&}--disabled {
      color: var(
        --wds-color-text-disabled,
        var(--wsr-color-D10-30, rgba(0, 6, 36, 0.30))
      );
    }
  }

  &__title {
    @include text-medium-thin;

    &#{&}--active {
      @include text-medium-bold;
    }
  }

  &__subtitle {
    @include text-tiny-thin;

    &#{&}--active {
      @include text-tiny-bold;
    }
  }

  &__title,
  &__subtitle {
    text-overflow: ellipsis;
    white-space: nowrap;
    overflow: hidden;
  }

  &__item {
    margin-bottom: 6px;

    &#{&}--is-placeholder {
      border-radius: 4px;
      background-color: var(
        --wds-color-fill-dark-secondary-hover,
        var(--wsr-color-D60, #DFE5EB)
      );
      box-shadow: none;
    }
  }

  &__item#{&}__item--is-placeholder > * {
    visibility: hidden;
  }

  &__actions-container {
    display: flex;
    flex-direction: column;
  }

  /*
   * Doubled: these tie with `AddItem`'s root at (0,1,0) and only won because the
   * Stylable bundle emitted TimeTable later. Bundle order between two migrated
   * sheets is not guaranteed, so the win is pinned by specificity instead.
   */
  &__add-item-button#{&}__add-item-button {
    padding: 4px;
    height: 30px;
    margin-bottom: 6px;

    & svg {
      width: 18px;
      height: 18px;
      vertical-align: middle;
      position: relative;
      top: -1px;
      margin-right: 6px;
    }
  }

  /*
   * `AddItem`'s own class — both sheets carry the same versioned prefix. Tripled
   * for the same reason as above: it ties with `.add-item.add-item--skin-dashes`.
   */
  &__add-item-button#{&}__add-item-button.add-item--skin-dashes {
    border-radius: 4px;
  }

  &__add-item-label {
    @include text-tiny-normal;
  }

  &__header-container {
    position: sticky;
    flex-shrink: 0;
    width: 100%;
    top: 0;
    display: flex;
    z-index: 1;
  }

  &__content-container {
    display: flex;
    flex-grow: 1;
    flex-shrink: 0;
    width: 100%;
  }

  &__column,
  &__header {
    border-left: 1px solid #{$divider};
  }

  &__column:first-child,
  &__header:first-child {
    border-left: none;
  }

  :global([dir='rtl']) &__column:last-child,
  :global([dir='rtl']) &__header:last-child {
    border-left: none;
  }

  :global([dir='rtl']) &__column:first-child,
  :global([dir='rtl']) &__header:first-child {
    border-left: 1px solid #{$divider};
  }

  &__content {
    box-sizing: border-box;
  }
}