@use 'Foundation/scss/scrollbar-chains' as chains;

$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-small: var(--wds-font-size-body-small, var(--wsr-text-font-size-small, 14px));
$font-size-medium: var(--wds-font-size-body-medium, var(--wsr-text-font-size-medium, 16px));
$font-weight-regular: var(--wds-font-weight-regular, var(--wsr-font-weight-regular, 400));
$font-weight-medium: var(--wds-font-weight-medium, var(--wsr-font-weight-medium, 530));
$font-weight-bold: var(--wds-font-weight-bold, var(--wsr-font-weight-bold, 700));
$line-height-small: var(--wds-font-line-height-body-small, var(--wsr-text-line-height-small, 18px));
$line-height-medium: var(--wds-font-line-height-body-medium, var(--wsr-text-line-height-medium, 24px));
$letter-spacing: var(--wds-font-letter-spacing-0, unset);

$item-fill: var(--wds-table-list-item-fill, var(--wds-color-fill-standard-tertiary, var(--wsr-color-D80, #FFFFFF)));
$item-fill-highlight: var(--wds-table-list-item-fill-highlight, var(--wds-color-blue-600, var(--wsr-color-B60, #F4F7FF)));
$item-fill-active: var(--wds-table-list-item-fill-active, var(--wds-color-fill-standard-tertiary-active, var(--wsr-color-B40, #D6E6FE)));
$item-fill-hover: var(--wds-table-list-item-fill-hover, var(--wds-color-fill-standard-tertiary-hover, var(--wsr-color-B50, #E7F0FF)));
$item-fill-hover-highlight: var(--wds-table-list-item-fill-hover, var(--wds-color-fill-standard-tertiary-hover, var(--wsr-color-B60, #F4F7FF)));
$item-fill-hover-active: var(--wds-table-list-item-fill-hover, var(--wds-color-fill-standard-tertiary-hover, var(--wsr-color-B40, #D6E6FE)));
$header-fill: var(--wds-table-list-header-fill, var(--wds-color-fill-surface-standard, var(--wsr-color-B40, #D6E6FE)));
$header-divider-top: var(--wds-table-list-header-divider-fill-top, var(--wds-color-border-standard-primary, var(--wsr-color-B30, #A8CAFF)));
$header-divider-bottom: var(--wds-table-list-header-divider-fill-bottom, var(--wds-color-border-standard-primary, var(--wsr-color-B30, #A8CAFF)));
$header-icon-fill: var(--wds-table-list-header-icon-fill, var(--wds-color-text-primary, var(--wsr-color-B10, #116DFF)));
$header-min-height: var(--wds-table-list-header-min-height, var(--wds-space-700, 42px));
$header-font-weight: var(--wds-table-header-font-weight, var(--wds-font-weight-regular, 400));
$cell-padding-inline: var(--wds-table-cell-padding-inline, 12px);
$row-divider-fill: var(--wds-table-row-divider-fill, var(--wds-color-border-dark-secondary, var(--wsr-color-D60, #DFE5EB)));

$border-dark-secondary-d60: var(--wds-color-border-dark-secondary, var(--wsr-color-D60, #DFE5EB));
$border-dark-secondary-d70: var(--wds-color-border-dark-secondary, var(--wsr-color-D70, #ECEFF3));
$text-standard-primary-d20: var(--wds-color-text-standard-primary, var(--wsr-color-D20, #333853));
$text-standard-primary-d10: var(--wds-color-text-standard-primary, var(--wsr-color-D10, #000624));
$fill-standard-tertiary: var(--wds-color-fill-standard-tertiary, var(--wsr-color-D80, #FFFFFF));
$fill-surface-neutral: var(--wds-color-fill-surface-neutral, var(--wsr-color-D75, #F7F8F8));
$scroll-shadow: var(--wds-color-black-100-transparent-10, var(--wsr-color-D10-10, rgba(0, 6, 36, 0.10)));
$resize-handle-fill: var(--wds-color-black-500, var(--wsr-color-D50, #ACAFC4));
$neutral-row-fill: var(--wds-color-black-750, var(--wsr-color-D75, #F7F8F8));

.data-table {
  border-collapse: collapse;
  border-spacing: 0;
  table-layout: fixed;
  background-color: $item-fill;
  --wds-internal-table-action-cell-row-fill: #{$item-fill};

  & thead {
    font-family: $font-family;
    font-size: $font-size-small;
    font-weight: $font-weight-medium;
    line-height: $line-height-small;
    letter-spacing: $letter-spacing;
  }

  & thead tr {
    height: $header-min-height;
  }

  & tbody {
    font-family: $font-family;
    font-size: $font-size-small;
    font-weight: $font-weight-regular;
    line-height: $line-height-small;
    letter-spacing: $letter-spacing;
  }

  &#{&}--virtualized {
    display: block;
  }

  &#{&}--virtualized thead {
    top: 0;
    display: block;
    position: sticky;
    z-index: 2;
  }

  &#{&}--virtualized thead th {
    box-sizing: border-box;
    padding-top: var(--wds-space-150, 9px);
    padding-bottom: var(--wds-space-150, 9px);
    height: $header-min-height;
  }

  &#{&}--virtualized tbody {
    display: block;
    transform: translateY(0);
  }

  &#{&}--virtualized tbody td {
    box-sizing: border-box;
  }

  &#{&}--virtualized tr {
    display: flex;
  }

  &#{&}--virtualized td,
  &#{&}--virtualized th {
    display: flex;
    align-items: center;
  }

  & td {
    color: $text-standard-primary-d20;
  }

  & td,
  & th {
    padding-inline-start: $cell-padding-inline;
    padding-inline-end: $cell-padding-inline;
  }

  & td#{&}__cell--sticky,
  & th#{&}__header-cell--sticky {
    position: sticky;
    z-index: 1;
    box-sizing: content-box;
    left: calc(var(--wds-internal-table-sticky-offset) + var(--wds-internal-table-sticky-padding-count, 0) * #{$cell-padding-inline});
  }

  & td:last-child,
  & th:last-child {
    padding-inline-start: $cell-padding-inline;
    padding-inline-end: 24px;
  }

  & td:first-child,
  & th:first-child {
    padding-inline-start: 24px;
    padding-inline-end: $cell-padding-inline;
  }

  & td[data-hook="row-status-cell"] {
    position: relative;
  }

  & td#{&}__details-cell#{&}__details-cell--active {
    padding-inline-start: 24px;
    padding-inline-end: 24px;
  }

  & th {
    text-align: initial;
    font-weight: initial;
    padding-top: var(--wds-space-150, 9px);
    padding-bottom: var(--wds-space-150, 9px);
    height: 24px;
    color: $text-standard-primary-d10;
  }

  & th#{&}__header-cell--skin-standard {
    background-color: $header-fill;
    box-shadow: inset 0 1px 0 0 $header-divider-top, inset 0 -1px 0 0 $header-divider-bottom;
  }

  & th#{&}__header-cell--skin-neutral {
    background-color: $fill-surface-neutral;
    box-shadow: inset 0 1px 0 0 $border-dark-secondary-d60, inset 0 -1px 0 0 $border-dark-secondary-d60;
  }

  & th &__th-container {
    display: flex;
    align-items: center;
    margin: 0;
    padding: 0;
    border: none;
    font: inherit;
    color: inherit;
    background-color: transparent;
    text-align: inherit;
    cursor: inherit;
    min-width: 0;
    max-width: 100%;
    box-sizing: border-box;
  }

  & th &__th-container &__title-text {
    flex: 0 1 auto;
    min-width: 0;
    overflow: hidden;
    font-weight: $header-font-weight;
  }

  & th &__th-container#{&}__th-container--align-start {
    justify-content: flex-start;
  }

  & th &__th-container#{&}__th-container--align-center {
    justify-content: center;
  }

  & th &__th-container#{&}__th-container--align-end {
    justify-content: flex-end;
  }

  & th &__th-container &__info-tooltip-wrapper {
    margin-left: 6px;
    flex-shrink: 0;
  }

  & th &__th-container &__title-suffix {
    margin-left: auto;
    flex-shrink: 0;
  }

  &--row-vertical-padding-large td {
    padding-top: 24px;
    padding-bottom: 24px;
  }

  &--row-vertical-padding-medium td {
    padding-top: 18px;
    padding-bottom: 18px;
  }

  &--row-vertical-padding-small td {
    padding-top: 15px;
    padding-bottom: 15px;
  }

  &--row-vertical-padding-x-tiny td {
    padding-top: var(--wds-space-100, 6px);
    padding-bottom: var(--wds-space-100, 6px);
  }

  &--row-vertical-padding-xx-tiny td {
    padding-top: var(--wds-space-50, 3px);
    padding-bottom: var(--wds-space-50, 3px);
  }

  &--row-vertical-padding-tiny td#{&}__details-cell#{&}__details-cell--active {
    padding-top: 0px;
    padding-bottom: 12px;
  }

  &--row-vertical-padding-small td#{&}__details-cell#{&}__details-cell--active {
    padding-top: 0px;
    padding-bottom: 15px;
  }

  &--row-vertical-padding-medium td#{&}__details-cell#{&}__details-cell--active {
    padding-top: 0px;
    padding-bottom: 18px;
  }

  &--row-vertical-padding-large td#{&}__details-cell#{&}__details-cell--active {
    padding-top: 0px;
    padding-bottom: 24px;
  }

  &--remove-row-details-padding#{&}--row-vertical-padding-xx-tiny td#{&}__details-cell#{&}__details-cell--active,
  &--remove-row-details-padding#{&}--row-vertical-padding-x-tiny td#{&}__details-cell#{&}__details-cell--active,
  &--remove-row-details-padding#{&}--row-vertical-padding-tiny td#{&}__details-cell#{&}__details-cell--active,
  &--remove-row-details-padding#{&}--row-vertical-padding-small td#{&}__details-cell#{&}__details-cell--active,
  &--remove-row-details-padding#{&}--row-vertical-padding-medium td#{&}__details-cell#{&}__details-cell--active,
  &--remove-row-details-padding#{&}--row-vertical-padding-large td#{&}__details-cell#{&}__details-cell--active {
    padding: 0;
  }

  &--row-vertical-padding-tiny td {
    padding-top: 12px;
    padding-bottom: 12px;
  }

  & td#{&}__cell--align-start {
    text-align: left;
    text-align: start;
  }

  & td#{&}__cell--align-center {
    text-align: center;
  }

  & td#{&}__cell--align-end {
    text-align: right;
    text-align: end;
  }

  & td#{&}__cell--sticky {
    background-color: $fill-standard-tertiary;
  }

  &#{&}--show-last-row-divider td {
    box-shadow: inset 0 -1px 0 0 $row-divider-fill;
  }

  &:not(#{&}--show-last-row-divider) tr:not(:last-child) td {
    box-shadow: inset 0 -1px 0 0 $row-divider-fill;
  }

  &:not(#{&}--show-last-row-divider) tr:nth-last-child(2) td#{&}__cell--has-row-details {
    box-shadow: none;
  }

  &#{&}--show-last-row-divider tr:nth-last-child(2) td#{&}__cell--has-row-details {
    box-shadow: inset 0 -1px 0 0 $row-divider-fill;
  }

  & td#{&}__details-cell {
    padding: 0;
    height: 0;
    box-shadow: none;
  }

  & td#{&}__details-cell--active {
    padding: 0;
    height: auto;
    box-shadow: inset 0 -1px 0 0 $border-dark-secondary-d70;
  }

  & td#{&}__cell--important {
    font-family: $font-family;
    font-size: $font-size-medium;
    font-weight: $font-weight-regular;
    line-height: $line-height-medium;
    letter-spacing: $letter-spacing;
    color: var(--wds-color-black-100, var(--wsr-color-D10, #000624));
  }

  &__row--clickable {
    cursor: pointer;
  }

  &__row--clickable:focus-visible {
    position: relative;
    z-index: 1;
    /* stylelint-disable-next-line plugin/use-baseline */
    outline: var(--wds-outline-focus-outer, 3px solid var(--wsr-color-B10, #116DFF));
    outline-offset: -4px;
    box-shadow: inset 0 0 0 1px var(--wds-color-white, var(--wsr-color-D80, #FFFFFF));
  }

  & &__row--highlight {
    background-color: $item-fill-highlight;
    --wds-internal-table-action-cell-row-fill: #{$item-fill-highlight};
  }

  & &__row--highlight td {
    font-family: $font-family;
    font-size: $font-size-small;
    font-weight: $font-weight-bold;
    line-height: $line-height-small;
    letter-spacing: $letter-spacing;
    color: $text-standard-primary-d10;
  }

  & &__row--highlight td#{&}__cell--sticky {
    background-color: $item-fill-highlight;
  }

  & &__row--active {
    background-color: $item-fill-active;
    --wds-internal-table-action-cell-row-fill: #{$item-fill-active};
  }

  & &__row--active td#{&}__cell--sticky {
    background-color: $item-fill-active;
  }

  &__row--selected td:first-child:not(#{&}__cell--sticky) {
    position: relative;
  }

  &__row--selected td:first-child::before {
    content: '';
    position: absolute;
    top: 0;
    bottom: 0;
    left: 0;
    width: 2px;
    background-color: var(--wds-color-border-standard-primary-active, var(--wsr-color-B10, #116DFF));
  }

  &__sort-arrow {
    font-size: 9px;
    margin-left: 6px;
    color: $header-icon-fill;
    display: flex;
    align-items: center;
    flex-shrink: 0;
  }

  &__row-details:not(:last-child) {
    box-shadow: inset 0 -1px 0 0 $border-dark-secondary-d70;
  }

  &__row--animated {
    cursor: pointer;
  }

  &__row--animated td {
    box-shadow: none;
  }

  &__row--animated:nth-last-child(2) td {
    box-shadow: inset 0 1px 0 0 $border-dark-secondary-d70;
  }

  &__header-scroll-content {
    overflow-x: hidden;
  }

  &__body-scroll-content {
    overflow-x: auto;
  }

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

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

  &__body-scroll-content::-webkit-scrollbar-thumb {
    background-color: chains.$scrollbar-fill;
    background-clip: content-box;
    border-radius: var(--wds-border-radius-full, calc(3px * 2));
    border: calc((12px - #{chains.$scrollbar-width}) / 2) solid transparent;
    height: 72px;
  }

  @media (hover: hover) {
    &__body-scroll-content::-webkit-scrollbar-thumb:hover {
      background-color: chains.$scrollbar-fill-hover;
    }
  }

  &__body-scroll-content::-webkit-scrollbar-thumb:active {
    background-color: chains.$scrollbar-fill-active;
  }

  &__body-scroll-content::-webkit-scrollbar {
    height: 12px;
  }

  &__scroll-wrapper {
    position: relative;
  }

  &__scroll-wrapper::before,
  &__scroll-wrapper::after,
  &__scroll-wrapper &__cell--last-sticky::after,
  &__scroll-wrapper &__header-cell--last-sticky::after {
    content: '';
    display: block;
    width: 24px;
    height: 100%;
    position: absolute;
    top: 0;
    pointer-events: none;
    opacity: 0;
    transition: opacity 150ms linear;
  }

  &__scroll-wrapper#{&}__scroll-wrapper--left-shadow-visible:not(#{&}__scroll-wrapper--with-sticky-columns)::before,
  &__scroll-wrapper#{&}__scroll-wrapper--left-shadow-visible &__cell--last-sticky::after,
  &__scroll-wrapper#{&}__scroll-wrapper--left-shadow-visible &__header-cell--last-sticky::after {
    background-image: linear-gradient(to right, $scroll-shadow, transparent);
    left: 0;
    opacity: 1;
    z-index: 1;
  }

  &__scroll-wrapper#{&}__scroll-wrapper--left-shadow-visible &__cell--last-sticky::after,
  &__scroll-wrapper#{&}__scroll-wrapper--left-shadow-visible &__header-cell--last-sticky::after {
    left: auto;
    right: -24px;
  }

  &__scroll-wrapper#{&}__scroll-wrapper--right-shadow-visible::after {
    background-image: linear-gradient(to left, $scroll-shadow, transparent);
    right: 0;
    opacity: 1;
    z-index: 1;
  }

  @at-root td#{&}__cell--sticky-action-cell {
    position: sticky;
    right: 0;
  }

  @at-root td#{&}__cell--sticky-action-cell [data-hook="table-action-cell-placeholder"] {
    display: none;
  }

  @media (hover: hover) {
    & tr:hover td#{&}__cell--sticky-action-cell {
      background-color: $fill-standard-tertiary;
    }

    & tr:hover#{&}__row--clickable td {
      cursor: pointer;
      background-color: $item-fill-hover;
      --wds-internal-table-action-cell-row-fill: #{$item-fill-hover};
    }

    & tr:hover#{&}__row--highlight td#{&}__cell--sticky-action-cell {
      background-color: $item-fill-hover-highlight;
    }

    & tr:hover#{&}__row--active td#{&}__cell--sticky-action-cell {
      background-color: $item-fill-hover-active;
    }
  }

  & tr td#{&}__cell--row-details-extended {
    box-shadow: none !important;
  }

  &__row-fill--skin-light {
    background-color: $item-fill;
  }

  &__row-fill--skin-neutral {
    background-color: $neutral-row-fill;
  }

  &__row-fill--skin-highlight {
    background-color: $item-fill-highlight;
  }

  &__row--skin-light:not(#{&}__row--active):not(#{&}__row--highlight) {
    background-color: $item-fill;
  }

  &__row--skin-neutral:not(#{&}__row--active):not(#{&}__row--highlight) {
    background-color: $neutral-row-fill;
  }

  &__row--skin-light#{&}__row--highlight:not(#{&}__row--active) {
    background-color: $item-fill-highlight;
  }

  &__row--skin-neutral:not(#{&}__row--active):not(#{&}__row--highlight) td#{&}__cell--sticky {
    background-color: $neutral-row-fill;
  }

  @media (hover: hover) {
    &__row--skin-neutral:not(#{&}__row--active):not(#{&}__row--highlight):hover td#{&}__cell--sticky-action-cell {
      background-color: $neutral-row-fill;
    }

    &__row--skin-light#{&}__row--highlight:not(#{&}__row--active):hover td#{&}__cell--sticky-action-cell {
      background-color: $item-fill-highlight;
    }
  }

  &__virtual-row {
    display: flex;
    min-width: 100%;
    width: 100%;
  }

  &__virtual-row#{&}__virtual-row--horizontal-scroll {
    width: max-content;
  }

  &__virtual-thead {
    display: inline-flex;
    min-width: 100%;
  }

  &__virtual-row td,
  &__virtual-row th {
    align-items: center;
    display: flex;
    min-width: 0;
  }

  &__virtual-row#{&}__virtual-row--horizontal-scroll td,
  &__virtual-row#{&}__virtual-row--horizontal-scroll th {
    flex-shrink: 0;
  }

  &__virtual-row th {
    justify-content: flex-start;
    height: auto;
    align-self: stretch;
  }

  &__virtual-row th &__th-container {
    flex: 1;
    min-width: 0;
  }

  &__virtual-row td#{&}__cell--sticky-action-cell {
    justify-content: flex-end;
    z-index: 2;
  }

  &__virtual-row td#{&}__cell--align-center {
    justify-content: center;
  }

  &__resize-handle {
    position: absolute;
    top: 0;
    right: 0;
    width: 7px;
    height: 100%;
    cursor: col-resize;
    /* stylelint-disable-next-line plugin/use-baseline */
    user-select: none;
    background-color: transparent;
    background-repeat: no-repeat;
    background-position: center;
    background-size: 1px 0;
    background-image: linear-gradient(to bottom, $resize-handle-fill, $resize-handle-fill);
    transition: background-size 0.2s ease, opacity 0.2s ease;
  }

  &__resize-handle::before {
    content: '';
    position: absolute;
    left: 50%;
    top: 50%;
    width: 1px;
    height: 6px;
    background: transparent;
    border-radius: 0;
    opacity: 0;
    transform: translate(-50%, -50%);
    box-shadow: -3px 0 0 0 $resize-handle-fill, 3px 0 0 0 $resize-handle-fill;
    transition: opacity 0.2s ease;
  }

  @media (hover: hover) {
    th:hover &__resize-handle {
      background-size: 1px 14px;
    }

    th:hover &__resize-handle::before {
      opacity: 1;
    }

    th:hover &__resize-handle:hover {
      background-size: 2px 14px;
    }

    th:hover &__resize-handle#{&}__resize-handle--dragging {
      background-size: 2px 14px;
    }
  }

  &__resize-handle#{&}__resize-handle--dragging {
    background-size: 2px 14px;
  }

  &__resize-handle#{&}__resize-handle--dragging::before {
    opacity: 1;
  }

  &__resize-handle-disabled {
    position: absolute;
    top: 0;
    right: 0;
    width: 5px;
    height: 100%;
    pointer-events: none;
    background: transparent;
  }

  &__resize-handle::after {
    content: '';
    position: absolute;
    top: 0;
    right: -6px;
    width: 12px;
    height: 100%;
    background-color: transparent;
  }
}