Elep

@use "sass:math";

$switch-size: 24px;
$switch-small-size: 0.75 * $switch-size;
$switch-on-color: $wp-button-primary-background-color;

.fs-switch
{
    position:      relative;
    display:       inline-block;
    //font-size:     1.6em;
    //font-weight:   bold;
    color:         #ccc;
    text-shadow:   0 1px 1px rgba(255, 255, 255, 0.8);
    height:        18px;
    padding:       6px 6px 5px 6px;
    border:        1px solid #ccc;
    border:        1px solid rgba(0, 0, 0, 0.2);
    //border-radius: 4px;
    background:    #ececec;
    box-shadow:    0 0 4px rgba(0, 0, 0, 0.1), inset 0 1px 3px 0 rgba(0, 0, 0, 0.1);
    cursor:        pointer;

span
    {
        display:        inline-block;
        width:          35px;
        text-transform: uppercase;
    }

.fs-toggle
    {
        position:      absolute;
        top:           1px;
        width:         37px;
        height:        $switch-size + 1px;
        border:        1px solid rgba(0, 0, 0, 0.3);
        border-radius: 4px;
        background-color:    #fff;
        background-image: linear-gradient(to bottom, #ececec, #fff);
        box-shadow:    inset 0 1px 0 0 rgba(255, 255, 255, 0.5);
        z-index:       999;
        @include transition(0.40s cubic-bezier(0.54, 1.6, 0.5, 1));
    }

&.fs-off .fs-toggle
    {
        left: 2%;
    }
    &.fs-on .fs-toggle
    {
        left: 54%;
    }

/* Round switch */
    &.fs-round
    {
        top:     math.div($switch-size, 3);
        padding: 4px ($switch-size + 1px);
        @include border-radius($switch-size);

.fs-toggle
        {
            top:    0;
            width:  $switch-size;
            height: $switch-size;
            @include border-radius($switch-size);
        }

&.fs-off .fs-toggle
        {
            left: -1px;
        }

&.fs-on
        {
            background: $switch-on-color;

.fs-toggle
            {
                left: $switch-size + 1px;
            }
        }
    }

&.fs-small
    {
        &.fs-round
        {
            padding: 1px ($switch-small-size + 1px);

.fs-toggle
            {
                top:    0;
                width:  $switch-small-size;
                height: $switch-small-size;
                @include border-radius($switch-small-size);
            }

&.fs-on .fs-toggle
            {
                left: $switch-small-size + 1px;
            }
        }
    }
}