/* Copyright (c) Crown Copyright (Department for Transport). Licensed under The MIT License (MIT).  See License file in the project root for license information. */
/* Declaration of variables required for switch component */

:root {
    --switch-height: 2rem;
    --switch-circle-size: 1.75rem;
    --switch-circle-edge-distance: 0.2rem;
    --switch-circle-anim-right: calc(100% - (var(--switch-circle-size) + var(--switch-circle-edge-distance)));
    --switch-text-width: calc(100% - (var(--switch-circle-size) + var(--switch-circle-edge-distance)));
    --switch-text-anim-right: calc(var(--switch-circle-size) + var(--switch-circle-edge-distance));
    --switch-anim-time: 0.5s;
}

/* Changing the size of the switch container */

.govuk-switch-container {
    width: 100%;
}

.govuk-switch-container__size_25 {
    width: 25%;
}

.govuk-switch-container__size_33 {
    width: 33%;
}

.govuk-switch-container__size_50 {
    width: 50%;
}

.govuk-switch-container__size_66 {
    width: 66%;
}

.govuk-switch-container__size_75 {
    width: 75%;
}

/* Switch component */

.govuk-switch {
    width: 100%;
    height: var(--switch-height);
    display: inline-block;
    border-radius: 30px;
    border: solid 3px black;
    cursor: pointer;
    position: relative;
}

    /* Outline on focus to keep to GDS theme */

    .govuk-switch:focus {
        outline: 4px solid #fd0;
        outline-offset: 0;
    }

    /* Component primary state */

    .govuk-switch[data-primary-anim] {
        animation: background-white var(--switch-anim-time);
    }

        .govuk-switch[data-primary-anim] .govuk-switch__text {
            animation: slide-text-right var(--switch-anim-time);
        }

        .govuk-switch[data-primary-anim] .govuk-switch__circle {
            animation: slide-circle-left var(--switch-anim-time);
        }

    .govuk-switch[data-primary] {
        background-color: white;
    }

        .govuk-switch[data-primary] .govuk-switch__text {
            color: black;
            text-align: right;
            right: 3px;
        }

        .govuk-switch[data-primary] .govuk-switch__circle {
            background-color: black;
            right: var(--switch-circle-anim-right);
        }

    /* Component secondary state */

    .govuk-switch[data-secondary-anim] {
        animation: background-black var(--switch-anim-time);
    }

        .govuk-switch[data-secondary-anim] .govuk-switch__text {
            animation: slide-text-left var(--switch-anim-time);
        }

        .govuk-switch[data-secondary-anim] .govuk-switch__circle {
            animation: slide-circle-right var(--switch-anim-time);
        }

    .govuk-switch[data-secondary] {
        background-color: #0b0c0c;
    }

        .govuk-switch[data-secondary] .govuk-switch__text {
            color: white;
            text-align: left;
            right: var(--switch-text-anim-right);
        }

        .govuk-switch[data-secondary] .govuk-switch__circle {
            background-color: white;
            right: var(--switch-circle-edge-distance);
        }

/* Text subcomponent */

.govuk-switch__text {
    font-family: 'GDS Transport', arial, sans-serif;
    pointer-events: none;
    display: inline-block;
    vertical-align: top;
    top: 0.35rem;
    position: absolute;
    width: var(--switch-text-width);
    font-weight: bold;
    -webkit-touch-callout: none;
    -webkit-user-select: none;
    -khtml-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    user-select: none;
}

/* Text padding before and after to not collide with main component border */

.govuk-switch__text::before {
    content: '';
    padding-left: 12px;
}

.govuk-switch__text::after {
    content: '';
    padding-right: 12px;
}

/* Circle subcomponent */

.govuk-switch__circle {
    height: var(--switch-circle-size);
    width: var(--switch-circle-size);
    border-radius: 50%;
    pointer-events: none;
    display: inline-block;
    top: 2px;
    position: absolute;
}

/* Main component background animations */

@keyframes background-black {
    from {
        background-color: white;
    }

    to {
        background-color: #0b0c0c;
    }
}

@keyframes background-white {
    from {
        background-color: #0b0c0c;
    }

    to {
        background-color: white;
    }
}

/* Text subcomponent slider animations */

@keyframes slide-text-left {
    0% {
        color: black;
        text-align: right;
        right: 0px;
        opacity: 1;
    }

    50% {
        opacity: 0.5;
    }

    100% {
        color: white;
        text-align: left;
        right: var(--switch-text-anim-right);
        opacity: 1;
    }
}

@keyframes slide-text-right {
    0% {
        color: white;
        text-align: left;
        right: var(--switch-text-anim-right);
        opacity: 1;
    }

    50% {
        opacity: 0.5;
    }

    100% {
        color: black;
        text-align: right;
        right: 3px;
        opacity: 1;
    }
}

/* Circle subcomponent slider animations */

@keyframes slide-circle-left {
    0% {
        background-color: white;
        right: var(--switch-circle-edge-distance);
    }

    100% {
        background-color: #0b0c0c;
        right: var(--switch-circle-anim-right);
    }
}


@keyframes slide-circle-right {
    0% {
        background-color: #0b0c0c;
        right: var(--switch-circle-anim-right);
    }

    100% {
        background-color: white;
        right: var(--switch-circle-edge-distance);
    }
}