@import '../dynamic.scss';

.form-toggle-input {
    height: 3.2rem;
    appearance: none;
    position: relative;
    &::before {
        content: ' ';
        background-color: $gray-400;
        border: $input-border-width solid $gray-400;
        border-radius: $input-height / 2;
        height: $input-height;
        width: $input-height * 2;
        position: relative;
        display: inline-block;
        cursor: pointer;
    }
    &::after {
        content: ' ';
        background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 12'><path d='M.9 11.9c-.2.2-.5.2-.7 0-.2-.2-.2-.5 0-.7L5.3 6 .1.9C0 .7 0 .4.1.2c.2-.2.6-.2.8 0L6 5.3 11.1.1c.2-.2.5-.2.7 0 .2.2.2.5 0 .7L6.7 6l5.2 5.1c.2.2.2.5 0 .7-.2.2-.5.2-.7 0L6 6.7.9 11.9z' clip-rule='evenodd'/></svg>");
        background-size: 1.2rem 1.2rem;
        background-position: center center;
        background-repeat: no-repeat;
        background-color: $white;
        border-radius: 50%;
        height: calc(#{$input-height} - #{$input-border-width * 4});
        width: calc(#{$input-height} - #{$input-border-width * 4});
        top: $input-border-width * 2;
        left: $input-border-width * 2;
        position: absolute;
        display: inline-block;
        transition: left 0.2s ease-in-out;
        cursor: pointer;
    }
    &:checked {
        &::before {
            background-color: $success;
            border-color: $success;
        }
        &::after {
            background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 14 10'><path d='M13.4.6c.2.2.2.5 0 .7L5.2 9.7c-.1.1-.3.1-.4.1-.1 0-.3-.1-.4-.1L.6 5.8c-.2-.2-.2-.5 0-.7.2-.2.5-.2.7 0l3.4 3.5 7.9-8c.2-.1.6-.1.8 0z' clip-rule='evenodd'/></svg>");
            left: 3.4rem;
        }
    }
    &:focus,
    &:active {
        outline: none;
        &::before {
            border-color: $gray-500;
            border-width: $input-border-width * 2;
        }
        &:checked::before {
            background-color: map-get($highlighted-colors, success);
            border-color: map-get($active-colors, success);
        }
    }
    &.disabled,
    &:disabled {
        opacity: $btn-disabled-opacity;
        cursor: default;
    }
}

.form-toggle {
    height: $input-height;
    & > .form-toggle-label {
        line-height: $input-height;
        padding-left: 1rem;
        margin: 0;
        cursor: pointer;
    }
    & > .form-toggle-input:disabled + .form-toggle-label {
        opacity: $btn-disabled-opacity;
    }
}