knobSize = 1.8em;
knobMargin = 0.2em;

.fl-switchUI {
    display: flex;
    justify-content: center;
    align-items: center;
}

.fl-switchUI-control {
    width: knobSize * 3;
    border: 0.15em solid var(--fl-fgColor, currentColor);
    border-radius: knobSize + knobMargin;
    margin: 0 1em;
    display: flex;
    align-items: center;
    background-color: var(--fl-bgColor, #ffffff);

    &:focus {
        outline: none;
        box-shadow: 0 0 0 0.2em var(--fl-bgColor, #ffffff),
                    0 0 0 0.35em var(--fl-fgColor, #000000);
    }

    &[aria-checked=true] {
        justify-content: flex-end;
    }
}

.fl-switchUI-controlKnob {
    height: knobSize;
    width: knobSize;
    background-color: var(--fl-fgColor, currentColor) !important;
    border-radius: knobSize;
    display: inline-block;
    margin: knobMargin;
}

.fl-switchUI-text {
    text-transform: uppercase;
    font-weight: 600;
}