@use "variables" as *;
@import "dotcms-theme/utils/theme-variables";
@import "mixins";

:host {
    padding: $spacing-1;
    cursor: pointer;

    dot-icon {
        bottom: 0;
        position: absolute;
        right: 0;
    }

    &::ng-deep {
        .material-icons {
            color: $color-palette-gray-700;
            transform: scale(1.2);
        }
    }

    &.disabled {
        &::ng-deep {
            .avatar__placeholder {
                background-color: $field-disabled-color;
            }

            .material-icons {
                color: $field-disabled-color;
            }
        }

        .dot-persona-selector__label,
        .dot-persona-selector__name {
            color: $field-disabled-color;
        }
    }

    @media only screen and (max-width: $screen-device-container-max) {
        & {
            width: unset;
        }
    }
}

.dot-persona-selector__label-container {
    @include truncate-text;

    span {
        display: block;
    }
}

.dot-persona-selector__label {
    color: $color-palette-gray-700;
    flex: 1;
    font-size: $font-size-sm;
    line-height: $spacing-3;
}

.dot-persona-selector__label--edit {
    color: $color-palette-primary;
}

.dot-persona-selector__name {
    color: $black;
    font-size: $font-size-md;

    @include truncate-text;
}

@media only screen and (max-width: $screen-lg-max) {
    .dot-persona-selector__name {
        display: none;
    }

    .dot-persona-selector__container.gap-3 {
        gap: 0.75rem !important;
    }
}
