/* stylelint-disable no-descending-specificity */
@use 'styles/mixins' as mixins;

$dynamic-table-font-size: var(--mat-sys-body-medium-size) !default;
$dynamic-table-header-font-size: var(--mat-sys-body-small-size) !default;
$dynamic-table-header-sort-icon-size: 16px !default;
$dynamic-table-row-height: 56px !default;
$dynamic-table-column-spacing: 36px !default;
$dynamic-table-column-padding: 18px !default;
$dynamic-table-card-padding: 24px !default;
$dynamic-table-cell-top: 12px !default;

dynamic-table-widget .adf-label {
    width: auto;
    height: auto;
}

.adf {
    &-dynamic-table-scrolling {
        overflow: auto;
    }

    &-dynamic-table {
        width: 100%;
        position: relative;
        border: 1px solid var(--mat-sys-outline-variant);
        white-space: nowrap;
        font-size: $dynamic-table-font-size;

        /* Firefox fixes */
        border-collapse: unset;
        border-spacing: 0;

        thead {
            padding-bottom: 3px;
        }

        tbody {
            tr {
                position: relative;
                height: $dynamic-table-row-height;
                transition: background-color 0.28s cubic-bezier(0.4, 0, 0.2, 1);

                &:hover {
                    background-color: var(--mat-sys-surface-dim);
                }

                &.adf-is-selected,
                &.adf-is-selected:hover {
                    background-color: var(--mat-sys-secondary-container);
                }

                &:focus {
                    outline-offset: -1px;
                    outline: var(--mat-sys-primary) solid 1px;
                }
            }
        }

        td,
        th {
            padding: 0 $dynamic-table-column-padding 12px;
            text-align: center;

            &:first-of-type {
                padding-left: 24px;
            }

            &:last-of-type {
                padding-right: 24px;
            }
        }

        td {
            @include mixins.adf-no-select;

            color: var(--mat-sys-on-surface);
            position: relative;
            vertical-align: middle;
            height: $dynamic-table-row-height;
            border-top: 1px solid var(--mat-sys-outline-variant);
            border-bottom: 1px solid var(--mat-sys-outline-variant);
            padding-top: $dynamic-table-cell-top;
            box-sizing: border-box;
            cursor: default;
        }

        th {
            @include mixins.adf-no-select;

            cursor: pointer;
            position: relative;
            vertical-align: bottom;
            text-overflow: ellipsis;
            font-weight: var(--mat-sys-label-large-weight);
            line-height: var(--mat-sys-label-large-line-height);
            letter-spacing: 0;
            height: $dynamic-table-row-height;
            font-size: $dynamic-table-header-font-size;
            color: var(--mat-sys-on-surface);
            padding-bottom: 8px;
            box-sizing: border-box;

            &.adf-sortable {
                @include mixins.adf-no-select;

                cursor: pointer;
            }

            &.adf-dynamic-table__header--sorted-asc,
            &.adf-dynamic-table__header--sorted-desc {
                color: var(--mat-sys-on-surface);

                &::before {
                    @include mixins.typo-icon;

                    content: '\e5d8';
                    margin-right: 5px;
                    vertical-align: sub;
                    cursor: pointer;
                }
            }

            &.adf-dynamic-table__header--sorted-desc::before {
                content: '\e5db';
            }
        }

        .adf-dynamic-table-cell {
            text-align: left;
            cursor: default;

            &--text {
                text-align: left;
            }

            &--number {
                text-align: right;
            }

            &--image {
                text-align: left;

                img {
                    width: 24px;
                    height: 24px;
                }
            }
        }

        .adf-full-width {
            width: 100%;
        }
    }
}