@use "../../core";
@use "../../core/size";
@use "variables" as *;

$vertical-padding: core.densify(size.$padding-025);
$horizontal-padding: size.$padding-050;

.table-ng__column {
    padding: $vertical-padding $horizontal-padding;
    border-bottom: 2px solid transparent;
    border-right: 1px solid transparent;

    &:focus-visible,
    &:has(:focus-visible) {
        box-shadow: none;
        outline: $table-ng-selection-outline solid $table-ng-cell-color-outline;
        outline-offset: -$table-ng-selection-outline;
    }

    &--selectable {
        text-align: center;
        padding: core.densify(size.$padding-025);

        input {
            height: var(--f-icon-size-medium);
            width: var(--f-icon-size-medium);
            vertical-align: middle;
            accent-color: $table-ng-button-primary-color-background-default;
        }

        input[type="checkbox"]:focus-visible {
            box-shadow: none;
        }
    }

    &--expandable {
        min-width: 2rem;
        width: 2rem;
    }

    &--rowheader {
        text-align: left;
        padding: core.densify(size.$padding-025);
    }

    &--shrink {
        width: 1px;
        white-space: nowrap;
    }

    &__sort-icon {
        color: $table-ng-color-icon-sort-selected;
        height: var(--f-icon-size-x-small);
        width: var(--f-icon-size-x-small);
        min-width: var(--f-icon-size-x-small);

        &--discrete {
            color: $table-ng-color-icon-sort-default;
        }
    }
}

@media (forced-colors: active) {
    .table-ng__column__sort-icon,
    .table-ng__column__sort-icon--discrete {
        color: CanvasText;
    }
}