@import '~@gravity-ui/uikit/styles/mixins';

.color-palettes-card {
    &__description-wrapper {
        margin-bottom: 10px;
    }

    &__title {
        @include text-subheader-1();
        margin-bottom: 4px;
    }

    &__description {
        color: var(--g-color-text-secondary);
    }

    &__list-item {
        height: 100%;
        width: 100%;
        display: flex;
        align-items: center;
        cursor: pointer;
        position: relative;
    }

    &__palettes-list-item-icon {
        width: 20px;
        height: 16px;
        margin: 0 8px;
    }

    &__add-palette-button {
        margin-top: 6px;
        margin-left: 8px;
    }

    &__add-palette-button_condensed {
        margin-left: 0;
        margin-top: 0;
    }

    &__list-items_condensed {
        margin-bottom: 10px;
    }

    &__list-item-wrapper:hover &__more-icon {
        opacity: 1;
    }

    &__more-icon {
        opacity: 0;
        margin-left: auto;
    }

    &__default-icon {
        margin: 0 20px 0 8px;

        &_default {
            color: var(--g-color-text-misc-heavy);
        }
    }

    &__list-item-content {
        height: 100%;
        width: 100%;
        display: flex;
        align-items: center;
    }

    &__list-item-actions {
        position: absolute;
        right: 8px;
        align-items: center;
        display: flex;
    }

    &__tooltip-anchor {
        width: fit-content;
    }
}
