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

.table {
  &__row .table-action-cell .table-action-cell__hover-slot.table-action-cell__hover-slot--display-on-hover {
    opacity: 0;
  }

  &__row:focus-within .table-action-cell .table-action-cell__hover-slot.table-action-cell__hover-slot--display-on-hover {
    opacity: 1;
  }

  @media (hover: hover) {
    &__row:hover .table-action-cell .table-action-cell__hover-slot.table-action-cell__hover-slot--display-on-hover {
      opacity: 1;
    }
  }

  &__row .table-action-cell .table-action-cell__hover-slot.table-action-cell__hover-slot--display-not-on-hover {
    opacity: 1;
  }

  &__row:focus-within .table-action-cell .table-action-cell__hover-slot.table-action-cell__hover-slot--display-not-on-hover {
    opacity: 0;
  }

  &__row:focus-within .table-action-cell .table-action-cell__placeholder-icon {
    display: none;
  }

  @media (hover: hover) {
    &__row:hover .table-action-cell .table-action-cell__hover-slot.table-action-cell__hover-slot--display-not-on-hover {
      opacity: 0;
    }

    &__row:hover .table-action-cell .table-action-cell__placeholder-icon {
      display: none;
    }
  }

  &__row &__row-number-cell &__row-number-checkbox {
    visibility: hidden;
  }

  &__row:focus-within &__row-number-cell &__row-number-text {
    display: none;
  }

  &__row:focus-within &__row-number-cell &__row-number-checkbox {
    visibility: visible;
  }

  @media (hover: hover) {
    &__row:hover &__row-number-cell &__row-number-text {
      display: none;
    }

    &__row:hover &__row-number-cell &__row-number-checkbox {
      visibility: visible;
    }
  }

  &__row-number-cell {
    position: relative;
  }

  &__row-number-text {
    position: absolute;
  }

  &__row-status-cell {
    position: absolute;
    inset: 0;
    line-height: 0;
  }

  &__row-status-cell#{&}__row-status-cell--status-error {
    color: var(--wds-color-text-destructive, var(--wsr-color-R10, #E62214));
  }

  &__row-status-cell#{&}__row-status-cell--status-warning {
    color: var(--wds-color-text-warning, var(--wsr-color-Y10, #FFB700));
  }

  &__row-status-message-list {
    margin: 0;
    padding-inline-start: 16px;
    list-style: disc;
  }

  &__selector-cell {
    display: flex;
    align-items: center;
    gap: 2px;
  }

  &__selector-cell-item {
    position: relative;
    flex-shrink: 0;
  }

  &__selector-cell-item--selection > .checkbox {
    inset-inline-start: 50%;
    transform: translateX(-50%);
  }

  :global([dir='rtl']) &__selector-cell-item--selection > .checkbox {
    transform: translateX(50%);
  }

  &__selector-cell .checkbox__label {
    width: auto;
    padding-inline: 5px;
  }

  &__selector-cell &__row-number-text {
    display: flex;
  }

  &__selector-cell &__row-number-cell .checkbox {
    display: flex;
    min-height: 0;
  }

  &__floating-scroll-bar {
    overflow: auto;
    position: absolute;
  }

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

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

  &__floating-scroll-bar::-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) {
    &__floating-scroll-bar::-webkit-scrollbar-thumb:hover {
      background-color: chains.$scrollbar-fill-hover;
    }
  }

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

  &__floating-scroll-bar::-webkit-scrollbar {
    height: 12px;
  }

  &__floating-scroll-bar-content::before {
    content: '\A0';
  }
}