@import '../../../mixins/box-sizing';
@import '../../../mixins/focus-state';

:host {
  @include tds-box-sizing;

  display: contents;

  .tds-table__row,
  .tds-table__row-extend {
    display: table-row;
    border-bottom: 1px solid var(--tds-table-divider);
    background-color: var(--tds-table-body-row-background);
    transition: background-color 200ms ease;
    color: var(--tds-table-color);
  }

  .tds-table__row--expanded {
    border-bottom: none;
  }

  .tds-table__row:hover,
  .tds-table__row-extend:hover {
    background-color: var(--tds-table-body-row-background-hover);
  }

  .tds-table__expand-control-container {
    display: flex;
    justify-content: center;
    align-items: center;
    height: 46px;
    cursor: pointer;
    padding: 0 16px;
    position: relative;

    .tds-table__expand-input {
      all: unset;
      top: 0;
      left: 0;
      width: 100%;
      height: 100%;
      position: absolute;
      cursor: pointer;

      &:focus {
        @include tds-focus-state;
      }
    }

    .tds-expendable-row-icon {
      height: 16px;
      width: 16px;
      transition: transform 200ms ease;
      transform: rotate(0);
    }
  }

  .tds-table__row-expand {
    display: none;
    transition: background-color 200ms ease;

    &--expanded {
      border-bottom: 1px solid var(--tds-table-divider);
    }

    .tds-table__cell-expand {
      max-width: 1px;
      overflow: auto;
      padding: 16px 16px 16px 66px;
      color: var(--tds-table-color);
    }

    .tds-table__cell-expand--overflow-visible {
      overflow: visible;
    }

    .tds-table__cell-expand--overflow-hidden {
      overflow: hidden;
    }
  }
}

:host(.tds-table__row-expand--active) {
  .tds-table__row {
    background-color: var(--tds-table-body-row-background-selected);
  }

  .tds-table__expand-control-container {
    .tds-expendable-row-icon {
      transform: rotate(180deg);
    }
  }

  .tds-table__row-expand {
    background-color: var(--tds-table-body-row-background-selected);
    display: table-row;
  }
}

// test
:host(.tds-table__compact) {
  .tds-table__expand-control-container {
    height: 30px;
  }

  .tds-table__row-expand {
    .tds-table__cell-expand {
      padding: 8px 16px 8px 66px;
    }
  }
}

:host(.tds-table__row--hidden) {
  display: none;
}

:host(.tds-table--divider) {
  .tds-table__cell--expand {
    border-right: 1px solid var(--tds-table-divider);
  }
}