@import '../../styles/mixins.scss';

.palette-item {
    position: relative;
    border-radius: 4px;
    display: flex;
    justify-content: center;
    align-items: center;

    &_default {
        background-color: var(--g-color-base-generic);
        border: 1px solid var(--g-color-base-generic-medium);
        color: var(--g-color-text-hint);
        font-size: 10px;
        text-transform: uppercase;
        display: flex;
        justify-content: center;
        align-items: center;
    }

    &_disabled {
        cursor: default;
        opacity: 50%;
    }

    &__lock-icon {
        width: 65%;
        height: 65%;
        opacity: 50%;
    }

    &_selectable {
        cursor: pointer;

        &:not(.palette-item_selected):not(.palette-item_default):hover::before {
            @include palette-item-border(var(--g-color-line-generic), -3px, -3px, 42px, 42px);
        }

        &.palette-item_default:not(.palette-item_selected):hover::before {
            @include palette-item-border(var(--g-color-line-generic), -4px, -4px, 42px, 42px);
        }

        &.palette-item_selected:not(.palette-item_default)::before {
            @include palette-item-border(
                var(--g-color-base-generic-medium),
                -3px,
                -3px,
                42px,
                42px
            );
        }

        &.palette-item_selected.palette-item_default::before {
            @include palette-item-border(
                var(--g-color-base-generic-medium),
                -4px,
                -4px,
                42px,
                42px
            );
        }
    }
}
