@import "../../css/colors.css";
@import "../../css/units.css";

.text-switch {
    display: flex;
    align-content: center;
    align-items: center;
}

.switch {
    cursor: pointer;
    border-color: $motion-tertiary;
    padding: $space;
    border-top-style: solid;
    border-bottom-style: solid;
    border-width: 1px;
    border-color: $motion-tertiary;
    border-right-style: solid;
    background-color: $ui-white;
    color: $motion-primary;
    text-align: center;
    transition: 0.25s ease-out; /* @todo: standardize with var */
}

[theme='dark'] .switch {
    background-color: $ui-primary-dark;
    color: $text-primary-dark;
}

.switch:first-child {
    border-color: $motion-tertiary;
    border-style: solid;
    border-radius: $form-radius 0 0 $form-radius;
}

.switch:last-child {
    border-right-style: solid;
    border-radius: 0 $form-radius $form-radius 0;
}

.switch.active {
    background-color: $motion-primary;
    color: $ui-white;
}

.switch img {
    image-rendering: crisp-edges;
    filter: invert(50%) sepia(41%) saturate(1318%) hue-rotate(188deg) brightness(103%) contrast(101%);
}

.switch.active img {
    filter: none;
}

