input {
    background: $color-white;
    border: 1px solid $color-dark-gray;
    border-radius: $border-radius;
    height: 30px;
    padding: 0 $gp / 2;
    width: 100%;
    margin-bottom: $gp;

    &.small {
        height: 20px;
        margin: 0;
    }
}

.toggle-switch {
    input[type=checkbox]{
        height: 0;
        width: 0;
        visibility: hidden;

        &:checked + label {
            background: $color-green;
        }

        &:checked + label:after {
            left: calc(100% - 3px);
            transform: translateX(-100%);
        }
    }

    label {
        cursor: pointer;
        text-indent: -9999px;
        width: 34px;
        height: 20px;
        background: grey;
        display: block;
        border-radius: 100px;
        position: relative;

        &:after {
            content: '';
            position: absolute;
            top: 3px;
            left: 3px;
            width: 14px;
            height: 14px;
            background: #fff;
            border-radius: 90px;
            transition: 0.3s;
        }
    }
}