@import '../../scss/styles.scss';

@layer payload-default {
  .sort-column {
    display: flex;
    gap: calc(var(--base) / 2);
    align-items: center;

    &__label {
      overflow: hidden;
      text-overflow: ellipsis;
      white-space: nowrap;
    }

    &__label,
    .btn {
      vertical-align: middle;
      display: inline-block;
    }

    &__label {
      cursor: default;
    }

    &__buttons {
      display: flex;
      align-items: center;
      gap: 0;
    }

    &__button {
      margin: 0;
      opacity: 0.3;
      padding: calc(var(--base) / 4) 0;
      display: inline-flex;
      align-items: center;
      justify-content: center;
      background: transparent;
      border: none;
      cursor: pointer;

      &.sort-column--active {
        opacity: 1;
        visibility: visible;
      }

      &:hover {
        opacity: 0.7;
      }
    }

    &:hover {
      .btn {
        opacity: 0.4;
        visibility: visible;
      }
    }

    &--appearance-condensed {
      gap: calc(var(--base) / 4);

      .sort-column__buttons {
        gap: 0;
      }
    }
  }
}