@use "../mixins" as *;

.split-button {
    padding-block: 4px 6px;
    padding-inline: 11px;
    border-radius: var(--control-corner-radius) 0 0 var(--control-corner-radius);
    flex: 1;

    &-container {
        @include flex($inline: true);
        & :global(button) {
            @include flex($inline: true, $align: center, $justify: center);
            @include typography-body;

            position: relative;
            box-sizing: border-box;
            transition: var(--control-faster-duration) ease background;
            text-decoration: none;
            border: none;
            outline: none;
            cursor: default;

            &:focus-visible {
                box-shadow: var(--focus-stroke);
            }

            &.style- {
                &standard {
                    border: 1px solid;
                    border-color: var(--control-border-default);
                    background-color: var(--control-fill-default);
                    color: var(--text-primary);
                    background-clip: padding-box;

                    &:hover {
                        background-color: var(--control-fill-secondary);
                    }

                    &:active {
                        border-color: var(--control-stroke-default);
                        background-color: var(--control-fill-tertiary);
                        color: var(--text-secondary);
                    }

                    &.disabled {
                        border-color: var(--control-stroke-default);
                        background-color: var(--control-fill-disabled);
                        color: var(--text-disabled);
                    }
                }

                &accent {
                    border: 1px solid var(--control-stroke-on-accent-default);
                    border-bottom-color: var(--control-stroke-on-accent-secondary);
                    background-color: var(--accent-default);
                    color: var(--text-on-accent-primary);
                    transition: var(--control-faster-duration) ease border-color;

                    &:hover {
                        background-color: var(--accent-secondary);
                    }

                    &:active {
                        border-color: transparent;
                        background-color: var(--accent-tertiary);
                        color: var(--text-on-accent-secondary);
                    }

                    &.disabled {
                        border-color: transparent;
                        background-color: var(--accent-disabled);
                        color: var(--text-on-accent-disabled);
                    }
                }

                &hyperlink {
                    background-color: var(--subtle-fill-transparent);
                    color: var(--accent-text-primary);
                    cursor: pointer;

                    &:hover {
                        background-color: var(--subtle-fill-secondary);
                    }

                    &:active {
                        background-color: var(--subtle-fill-tertiary);
                        color: var(--accent-text-tertiary);
                    }

                    &.disabled {
                        color: var(--accent-text-disabled);
                    }
                }
            }

            &.disabled {
                pointer-events: none;
            }
            &.hide-chevron {
                border-radius: var(--control-corner-radius);
            }
        }
    }

    &-chevron {
        padding-inline: 8px;
        height: 100%;
        border-radius: 0 var(--control-corner-radius) var(--control-corner-radius) 0;
        border-left-color: var(--fds-control-solid-fill-default) !important;
    }
}