@import '../../../../ng-aquila/src/shared-styles/index';

$icon-width: 9px; // approximation: chevron icon svg path
$icon-height: 9px; // approximation: chevron icon svg path
$icon-shift: -1px; // approximation: shifting icon position

:host {
    cursor: pointer;
}

.nx-sort-header__icons-container {
    display: flex;
    margin-left: nx-spacer(s);
    vertical-align: bottom;
    width: $icon-width;

    position: relative;
    flex-direction: column;
    justify-content: center;

    :host-context([dir='rtl']) & {
        margin-right: initial;
        margin-left: nx-spacer(s);
    }

    .nx-sort-header {
        &__unsorted {
            font-size: nx-font-size(2xs);
            position: relative;
            font-weight: nx-font-weight(semibold);
            width: $icon-width;
            height: $icon-height;
        }

        &__ascend,
        &__descend {
            font-weight: nx-font-weight(regular);
            font-size: var(--table-sort-icon-size);
            width: $icon-width;
            top: $icon-shift;
            position: relative;
            transform: rotate(90deg);
        }
    }
}

.nx-sort-header__focus-container {
    display: flex;
}

.nx-sort-header__focus-container:focus {
    // don't show inner dotted border on firefox
    outline: 0;

    &.cdk-keyboard-focused {
        @include focus-style;
        border-radius: nx-border-radius(s);
    }
}

@media screen and (forced-colors: active) {
    .nx-sort-header__focus-container {
        color: buttonText;
    }
}
