.SegmentedInput {
    display: flex;
    position: relative;
    background-color: white;
    outline: 1px solid var(--fields-stroke-default);
    outline-offset: -1px;
    border-radius: var(--radius-small);

    // Make default form-control border/bgs transparent
    > .form-control,
    .dropdown-toggle > .form-control {
        --fields-fill-default: transparent;
        --fields-stroke-default: transparent;
    }

    /* stylelint-disable no-descending-specificity */
    > * {
        &:not(.SuiteDivider) {
            z-index: 2;
        }

        &:is(.form-control.disabled),
        &:is(.form-control:disabled),
        &:has(.form-control.disabled),
        &:has(.form-control:disabled),
        &:is(.SearchInput.disabled) {
            z-index: 1;
        }

        &:not(:first-child) {
            margin-left: -1px;
        }

        &:focus-within {
            z-index: 3;
        }
    }
    /* stylelint-enable */

    &-static {
        align-self: center;
        padding: var(--padding-medium-small) var(--padding-medium-large);
        margin-right: var(--padding-small);
        color: var(--text-secondary);
    }

    &.disabled {
        background-color: var(--fields-fill-disabled);
        outline-color: var(--fields-stroke-disabled);

        .form-control {
            border-color: transparent;
            background-color: transparent;
        }

        .SegmentedInput-static {
            color: var(--text-primary-disabled);
        }
    }

    &-compact {
        border-radius: var(--radius-extra-large);
        height: 32px;
        width: fit-content;

        &-applied {
            background-color: var(--fields-fill-applied);
        }

        .dropdown-toggle > {
            .form-control {
                background-color: transparent;
                border-radius: var(--radius-extra-large);
                height: 32px;
                min-height: 32px;
            }

            .SuiteSelect-input-compact {
                padding: 0 var(--padding-medium-large);
            }
        }

        > .SearchInput {
            background-color: transparent;
            width: var(--segmented-input-active-width) !important;

            &.disabled {
                background-color: transparent;
            }

            &:not(:hover):not(:focus-within):not(.active) {
                border-color: transparent;
            }

            .SearchInput-input::placeholder {
                opacity: 1;
            }
        }
    }
}