/* stylelint-disable no-descending-specificity */
.SegmentedButton {
    align-items: center;
    display: flex;
    gap: var(--padding-small);

    --segmented-button-padding: var(--padding-medium-small);

    &-primary {
        border: 1px solid var(--fields-stroke-default, #b9bfc6);
        border-radius: 16px;
        height: 32px;
        gap: var(--padding-extra-small);

        .SegmentedButton-btn {
            @include text-body;

            text-transform: none;
            border-radius: 18px;
            height: 32px;
            padding: 0 var(--padding-medium);
            border: none;
            position: relative;
            color: var(--text-secondary);

            &.active:focus-visible {
                outline-offset: 1px;
            }

            &:disabled {
                color: var(--gray-400);
            }

            &.active {
                padding: 0 var(--padding-large);
                background-color: var(--fields-fill-applied, #deedf7);
                border: 1px solid var(--fields-stroke-default, #b9bfc6);
                height: 34px;

                &:not(:disabled):not(.loading) {
                    color: var(--text-primary);
                }

                &:disabled {
                    color: var(--gray-500);
                    background-color: var(--fields-fill-disabled, #f1f3f4);
                }
            }
        }
    }

    &-secondary {
        .SegmentedButton-btn {
            @include text-body;

            padding: 0 var(--segmented-button-padding);
            text-transform: none !important;
            height: 32px;
            letter-spacing: 0;

            &-divider {
                height: 20px;
                border-right: 1px solid var(--dividers-default, #b9bfc6);
                border-radius: 2px;
            }

            &-glyph {
                border-radius: 50% !important;
            }

            &.active {
                color: var(--midnight-750, #1d4f72);

                &::after {
                    content: '';
                    display: block;
                    width: calc(100% - (2 * var(--segmented-button-padding)));
                    position: absolute;
                    bottom: 2px;
                    height: 1px;
                    border-bottom: 1px solid var(--midnight-750, #1d4f72);
                    border-radius: 1px;
                }
            }

            // The focus outline for first/last expands beyond the element,
            // so we use psuedo-elements to overlay the outline without changing the size of the buttons.
            &:focus-visible {
                outline-color: transparent !important;

                &::before {
                    content: '';
                    position: absolute;
                    height: 100%;
                    outline: 2px solid var(--midnight-500, #3f93cf);
                    outline-offset: 2px;
                    border-radius: 10px;
                    display: block;
                    left: 0;
                    right: 0;
                }

                &:active::before {
                    outline-color: var(--midnight-600, #2c79af);
                }
            }

            &-glyph::before {
                border-radius: 16px !important;
            }
        }

        &.disabled {
            .SegmentedButton-btn-divider {
                border-color: var(--gray-500);
            }

            .SegmentedButton-btn {
                &.active {
                    color: var(--gray-600);

                    &::after {
                        border-color: var(--gray-600);
                    }
                }

                .GlyphIcon {
                    opacity: 1;
                }
            }
        }
    }

    /* Styles to modify first/last buttons, even when wrapped */
    &-primary > * {
        &:first-child {
            &.SegmentedButton-btn,
            & .SegmentedButton-btn {
                padding-left: var(--padding-large);
                left: -1px;
            }
        }

        &:last-child {
            &.SegmentedButton-btn,
            & .SegmentedButton-btn {
                padding-right: var(--padding-large);
                right: -1px;
            }
        }
    }

    &-secondary > * {
        &:first-child {
            &.SegmentedButton-btn,
            & .SegmentedButton-btn {
                padding-left: 0;

                &:focus-visible::before {
                    left: calc(0px - var(--segmented-button-padding));
                }
            }
        }

        &:last-child {
            &.SegmentedButton-btn,
            & .SegmentedButton-btn {
                padding-right: 0;

                &:focus-visible::before {
                    right: calc(0px - var(--segmented-button-padding));
                }
            }
        }
    }

    > * {
        &:first-child,
        &:last-child {
            &.SegmentedButton-btn,
            & .SegmentedButton-btn {
                &.active {
                    &::after {
                        width: calc(100% - var(--segmented-button-padding));
                    }
                }
            }
        }
    }
}