$black-100: var(--wds-color-black-100, var(--wsr-color-D10, #000624));

.time-table-item {
  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
    )
  );
  font-size: var(
    --wds-font-size-body-tiny,
    var(--wsr-text-font-size-tiny, 12px)
  );
  font-weight: var(
    --wds-font-weight-regular,
    var(--wsr-font-weight-regular, 400)
  );
  line-height: var(
    --wds-font-line-height-body-tiny,
    var(--wsr-text-line-height-tiny, 15px)
  );
  letter-spacing: var(--wds-font-letter-spacing-0, unset);
  padding: 6px 7px;
  border-radius: 4px;
  box-sizing: border-box;
  /* stylelint-disable-next-line plugin/use-baseline -- color-mix has a literal fallback color */
  box-shadow: 0 2px 4px 0
      color-mix(in srgb, #{$black-100} 12%, transparent),
    0 0 6px 0 color-mix(in srgb, #{$black-100} 12%, transparent);
  background-color: var(
    --wds-color-fill-surface-raised,
    var(--wsr-color-D80, #FFFFFF)
  );
  color: var(
    --wds-color-text-standard-primary,
    var(--wsr-color-D20, #333853)
  );
  /* stylelint-disable-next-line plugin/use-baseline */
  user-select: none;

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

  @media (hover: hover) {
    &#{&}--draggable:hover {
      color: var(--wds-color-black-200, #{$black-100});
      box-shadow: var(
        --wds-shadow-surface-overlay,
        0 0 18px rgba(0, 6, 36, 0.1),
        0 6px 6px rgba(0, 6, 36, 0.05)
      );
    }

    &#{&}--draggable:hover,
    &#{&}--draggable:hover * {
      cursor: grab;
    }

    &#{&}--draggable#{&}--disabled:hover {
      color: var(--wds-color-black-400, var(--wsr-color-D40, #868AA5));
    }
  }
}