@use "variables" as *;
@import "dotcms-theme/components/form/common";
@import "mixins";

dot-material-icon-picker {
    @extend #form-field-extend;
    padding-right: 0;

    &.is-open {
        border: $field-border-size solid $color-palette-primary-400;
        @include field-focus;
    }

    &::ng-deep {
        .dot-material-icon__input,
        .dot-material-icon__button,
        .dot-material-icon__preview {
            border: 0;
            height: calc(
                $field-height-md - ($field-border-size * 2)
            ); // All of this is relative so it's not really taking the height of the field and we need to center the icon
        }

        .dot-material-icon__input {
            padding: $spacing-2;
            padding-right: 0;
            font-size: $font-size-md;

            &:focus {
                outline: none;
            }
        }

        .dot-material-icon__preview {
            font-size: $font-size-lg;
        }

        .dot-material-icon__button {
            @extend #field-trigger;
            padding: 0;
            display: flex;
            align-items: center;
            justify-content: center;

            mwc-icon {
                font-size: $font-size-lg;
                width: $field-height-md;
            }
        }

        .dot-material-icon__list {
            border: 0;
            box-shadow:
                0 5px 5px -3px $color-palette-black-op-20,
                0 8px 10px 1px $color-palette-black-op-10,
                0 3px 14px 2px $color-palette-black-op-10;
            color: $black;

            li:hover {
                background: $bg-hover;
                color: $black;
            }

            label {
                align-items: center;
                cursor: pointer;
                display: flex;
                padding: $spacing-2;
            }

            mwc-icon {
                font-size: $font-size-lmd;
            }
        }
    }
}
