@import (optional) url('../variables/toggle.variant.less');

.app-toggle-off  .app-toggle {
    width: var(--wm-toggle-width);
    height: var(--wm-toggle-height);
    border-radius: var(--wm-toggle-border-radius);
    border-color: var(--wm-toggle-border-color);
    background-color: var(--wm-toggle-background-color);
    border-width: var(--wm-toggle-border-width);
}
.app-toggle-handle-off .app-toggle-handle {
    width: var(--wm-toggle-handle-width);
    height: var(--wm-toggle-handle-height);
    border-radius: var(--wm-toggle-handle-radius);
    margin-left: var(--wm-toggle-handle-margin-left);
    margin-right: var(--wm-toggle-handle-margin-right);
    background-color: var(--wm-toggle-handle-color);
    align-items: center;
    justify-content: center;
}
.app-toggle-on .app-toggle {
    width: var(--wm-toggle-width);
    height: var(--wm-toggle-height);
    border-radius: var(--wm-toggle-border-radius);
    border-color: var(--wm-toggle-border-color);
    background-color: var(--wm-toggle-background-color);
    border-width: var(--wm-toggle-border-width);
}
.app-toggle-handle-on .app-toggle-handle {
    width: var(--wm-toggle-handle-width);
    height: var(--wm-toggle-handle-height);
    border-radius: var(--wm-toggle-handle-radius);
    margin-left: var(--wm-toggle-handle-margin-left);
    margin-right: var(--wm-toggle-handle-margin-right);
    background-color: var(--wm-toggle-handle-color);
    align-items: center;
    justify-content: center;
}

.app-toggle-disabled {
    opacity: var(--wm-toggle-opacity);
}
.app-toggle-disabled.handle{
    opacity: var(--wm-toggle-opacity);
}

.app-toggle-checkicon.icon{
    color: #4F378A;
    font-size: 12px;
    align-self: center;
    min-width: 0px;
}

.app-toggle-uncheckicon.icon{
    color: #E6E0E9;
    font-size: 12px;
    align-self: center;
    min-width: 0px;
}


