// Variables
$sd-toggle-button-horizontal-padding: 16px;
$sd-toggle-button-vertical-padding: 8px;
$sd-toggle-button-vertical-padding-large: 12px;
$sd-toggle-button-border: 1px solid $gray5;

.sd-toggle-container {
    display: flex;
    border-radius: $sd-button-border-radius;
    font-size: $sd-x-small-text;

    @include sd-viewport($sd-mobile) {
        margin: 0 auto;
    }

    a,
    button {
        height: initial;
        padding: $sd-toggle-button-vertical-padding $sd-toggle-button-horizontal-padding;
        border: $sd-toggle-button-border;
        background: $white;
        color: $gray8;
        line-height: initial;
        white-space: initial;
        border-right: none;
        border-radius: unset;
        flex-basis: 50%;

        &:first-child {
            border-top-left-radius: $sd-button-border-radius;
            border-bottom-left-radius: $sd-button-border-radius;
        }
        &:last-child {
            border-right: $sd-toggle-button-border;
            border-top-right-radius: $sd-button-border-radius;
            border-bottom-right-radius: $sd-button-border-radius;
        }
        &:hover,
        &:focus,
        &:active {
            color: $accessible-blue;
            border-color: $accessible-blue;
            background-color: initial;
            box-shadow: inset 0 0 0 1px $accessible-blue;
        }
        &:focus {
            text-decoration: underline;
        }

        &.selected {
            background: $accessible-blue;
            color: $white;
            border-color: $accessible-blue;

            + a,
            + button {
                // Remove border-left from next sibling
                border-left: none;
            }
            &:focus {
                text-decoration: none;
            }
        }
    }

    &.mod-toggle-large {
        font-size: $sd-base-text;
        a,
        button {
            padding: $sd-toggle-button-vertical-padding-large $sd-toggle-button-horizontal-padding;
        }
    }
}

.sd-toggle-content {
    display: none;
    &.selected {
        display: inherit;
    }
}