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

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

    &_default {
        color: var(--g-color-text-secondary);
        font-size: 11px;
        font-weight: 500;
        display: flex;
        justify-content: center;
        align-items: center;

        &::before {
            @include palette-item-border(var(--g-color-line-generic), 1, 1px, 6px);
        }
    }

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

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

    &_selectable {
        cursor: pointer;

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

        &.palette-item_selected::before {
            @include palette-item-border(var(--g-color-line-brand), 3);
        }
    }
}
