@use '../core/styles/common/list';
@use './split-button-theme';

.kbq-split-button {
    display: flex;
    flex-direction: row;

    min-width: 0;

    border-radius: var(--kbq-size-border-radius);

    &.kbq-split-button_styles-for-nested {
        & .kbq-split-button_first {
            &.kbq-button {
                padding-right: 10px;
            }

            min-width: 0;

            border-right: none;

            border-top-right-radius: unset;
            border-bottom-right-radius: unset;

            & .kbq-button-wrapper {
                @include list.kbq-truncate-line();
            }
        }

        & .kbq-split-button_second {
            border-left: none;

            border-top-left-radius: unset;
            border-bottom-left-radius: unset;

            &::before {
                display: block;

                content: '';
                position: absolute;
                left: 0;
                top: calc(var(--kbq-size-s) - var(--kbq-button-size-border-width));

                width: 1px;
                height: var(--kbq-size-l);
            }
        }

        & .kbq-split-button_first:not(.kbq-disabled):is(:hover, .kbq-hover, .cdk-keyboard-focused, .kbq-active) {
            & + .kbq-split-button_second::before {
                display: none;
            }
        }

        &
            .kbq-split-button_second:not(.kbq-disabled):is(
                :hover,
                .kbq-hover,
                .cdk-keyboard-focused,
                .kbq-active
            )::before {
            display: none;
        }

        & .kbq-button-icon + .kbq-button-icon {
            padding-left: var(--kbq-size-xxs);
            padding-right: var(--kbq-size-xxs);
        }
    }
}

@include split-button-theme.kbq-split-button-theme();