.switch {
    position: relative;
    width: 1.5em;
    height: 1.5em;
    cursor: pointer;

    & > * {
        position: absolute;
        opacity: 0;
        transform: translate(0, 100%);
    }

    & > .selected {
        opacity: 1;
        transform: translate(0, 0);
    }

    .fadeOut {
        animation: fadeOut 0.2s ease-in-out;
        animation-fill-mode: forwards;
    }

    .fadeIn {
        animation: fadeIn 0.2s ease-in-out;
        animation-fill-mode: forwards;
    }
}

@keyframes fadeOut {
    from {
        opacity: 1;
        transform: translate(0, 0);
    }
    to {
        opacity: 0;
        transform: translate(0, -100%);
    }
}

@keyframes fadeIn {
    from {
        opacity: 0;
        transform: translate(0, 100%);
    }
    to {
        opacity: 1;
        transform: translate(0, 0);
    }
}