@use '../../../../../styles/base/mixin' as mixins;

$base-cell: (
    host: (
        gap: 0.5rem,
    ),
    prefix: (
        icon-size: 1.5rem,
    ),
    suffix: (
        icon-size: 1.5rem,
    ),
    title: (
        padding: 0.5rem 0.5rem 0.5rem 0,
    ),
    copy-button: (
        position-right: 0.25rem,
        position-left: 0.25rem,
        padding: 0.25rem,
        background-color: var(--mat-fab-small-container-color),
        icon-size: 1rem,
    ),
    copy-button-complete: (
        color: var(--clr-black-100),
    ),
);

:host {
    height: 100%;
    width: 100%;

    display: flex;
    align-items: center;
    gap: var(--rt-table-base-cell-host-gap);

    position: relative;

    @each $element, $elements in $base-cell {
        @each $style-token, $value in $elements {
            #{mixins.generateCssVar('table-base-cell', #{$element}, #{$style-token})}: #{$value};
        }
    }

    .base-cell {
        &__prefix {
            width: var(--rt-table-base-cell-prefix-icon-size);
            height: var(--rt-table-base-cell-prefix-icon-size);
            font-size: var(--rt-table-base-cell-prefix-icon-size);
        }

        &__title {
            width: 100%;
            display: table;
            table-layout: fixed;

            &-text {
                width: 100%;
                padding: var(--rt-table-base-cell-title-padding);
                white-space: nowrap;
                overflow: hidden;
                text-overflow: ellipsis;
            }

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

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

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

        &__suffix {
            width: var(--rt-table-base-cell-suffix-icon-size);
            height: var(--rt-table-base-cell-suffix-icon-size);
            font-size: var(--rt-table-base-cell-suffix-icon-size);
        }

        &__prefix,
        &__suffix {
            width: fit-content;
            min-width: fit-content;
        }

        &__copy-button {
            position: absolute;
            visibility: hidden;
            padding: var(--rt-table-base-cell-copy-button-padding);
            background-color: var(--rt-table-base-cell-copy-button-background-color);

            &--position {
                &--left {
                    left: var(--rt-table-base-cell-copy-button-position-left);
                }
                &--right {
                    right: var(--rt-table-base-cell-copy-button-position-right);
                }
            }

            &:hover,
            &:focus,
            &:active {
                background-color: var(--rt-table-base-cell-copy-button-background-color);
            }

            &--complete {
                cursor: not-allowed;

                &:hover,
                &:focus,
                &:active {
                    color: var(--rt-table-base-cell-copy-button-complete-color);
                }
            }

            &--visible {
                visibility: visible;
            }
        }

        &__copy-icon {
            width: var(--rt-table-base-cell-copy-button-icon-size);
            height: var(--rt-table-base-cell-copy-button-icon-size);
            font-size: var(--rt-table-base-cell-copy-button-icon-size);
        }
    }
}