@import "../ui-kit/buttons";

.c-combo-button {
    @apply btn-primary btn-s;
    @apply flex items-stretch;
    @apply p-0;

    box-shadow: 0px 3px 6px rgba(var(--shadowColorMain), 0.4);

    &.--disabled {
        opacity: 0.8;
        cursor: not-allowed;
        & .--primary-segment,
        & .--dropdown-segment {
            cursor: not-allowed;
        }
    }

    & .--primary-segment.--disabled {
        opacity: 0.8;
        cursor: not-allowed;
    }

    &:not(.--disabled) {
        &:hover {
            @apply bg-purple !important;
        }

        & .--primary-segment:hover,
        & .--dropdown-segment:hover {
            &:not(.--disabled):not(:disabled) {
                @apply bg-purpleDarkened;
            }
        }
    }

    & .--primary-segment,
    & .--dropdown-segment {
        transition: background 0.1s ease-in;
    }

    & .--primary-segment {
        @apply flex items-center;
        @apply font-semibold;
        @apply px-16;
        @apply border-r-1 border-borderColor3;
    }
    & .--dropdown-segment {
        @apply grid place-items-center px-12;
        & .c-icon {
            height: 13px;
            width: 13px;
            color: #cbc9d9;
        }
    }
}
