.ToggleButton {
    border-radius: 16px !important;

    &.btn {
        @include text-body;

        background-color: transparent;
        border: 1px solid var(--fields-stroke-default);
        color: var(--text-secondary);
        padding-left: 14px;
        padding-right: 14px;
        text-transform: none;

        &.toggled {
            background-color: var(--fields-fill-applied);
            color: var(--text-primary);

            &:disabled {
                background-color: var(--fields-fill-disabled);
                color: var(--text-primary-disabled);
            }
        }

        &:disabled {
            border-color: var(--fields-stroke-default);
            color: var(--text-secondary-disabled);
        }

        &:not(:disabled):not(.loading) {
            &:hover,
            &:active,
            &:focus-visible {
                color: var(--midnight-750);
                background-color: var(--fields-fill-applied);
                border-color: var(--fields-stroke-hover);
            }
        }
    }
    &.btn-sm {
        padding-left: 10px;
        padding-right: 10px;
    }
    &.btn-lg {
        padding-left: 22px;
        padding-right: 22px;
    }
}