@use '../../../common/scss/global.scss';
@use '../../../common/scss/mixins.scss';
@use '~@kyndryl-design-system/shidoka-foundation/scss/mixins/typography.scss';

:host {
  display: table-cell;
  vertical-align: middle;
  @include typography.type-ui-03;
  color: var(--kd-color-text-primary);
  font-weight: var(--kd-font-weight-bold);
  background: var(--kd-color-background-ui-soft);
  border-right: 1px solid var(--kd-color-border-inverse);
  border-left: 1px solid var(--kd-color-border-inverse);
  text-transform: uppercase;

  .container {
    display: flex;
    align-items: center;
    padding: var(--kd-spacing-16);
    outline: 2px solid transparent;
    outline-offset: -2px;
    border-radius: 4px;
    transition: outline-color 0.2s ease-in-out;

    &:hover,
    &:focus {
      .sort-icon {
        transition: background-color 0.3s;
        color: var(--kd-color-text-tertiary);
        cursor: pointer;
      }
    }
    &:focus {
      outline-color: var(--k-color-border-accent-spruce);
    }
  }
}

.sr-only {
  @include mixins.visually-hidden;
}

.sort-icon {
  color: transparent;
  transition: transform 0.3s ease;
  margin-left: var(--kd-spacing-8);

  &--sorting {
    color: var(--kd-color-text-primary);
  }

  &--sorting-asc {
    transform: rotate(0deg);
  }

  &--sorting-desc {
    transform: rotate(180deg);
  }
}

:host([sortable]:hover) {
  transition: background-color 0.3s;
  color: var(--kd-color-text-tertiary);
  cursor: pointer;
  .sort-icon {
    color: var(--kd-color-text-tertiary);
  }
}

:host([align='left']) {
  text-align: left;
  .container {
    justify-content: flex-start;
  }
}

:host([align='center']) {
  text-align: center;
  .container {
    justify-content: center;
  }
}

:host([align='right']) {
  text-align: right;
  .container {
    justify-content: flex-end;
  }
}

:host([dense]) .container {
  padding: var(--kd-spacing-12) var(--kd-spacing-4);
}