/*!
 * 
 * Copyright (c) 2019-2023 Software AG, Darmstadt, Germany and/or Software AG USA Inc., Reston, VA, USA,
 * and/or its subsidiaries and/or its affiliates and/or their licensors.
 * 
 */
@import "../variables";
@import "../variables/forms_vars";
@import "../mixins";
@import "../variables/toggle_switches_vars";

.dlt-fieldset {
    margin: 0;
    border: 0;
    padding: 0;

    &:disabled {
        opacity: $forms-opacity-disabled;
        cursor: unset;
    }
}

.dlt-switch-label {
    font-family: $toggle-switches-label-font-family;    
    font-weight: $toggle-switches-label-font-weight;
    font-size: $toggle-switches-label-font-size;
    color: $toggle-switches-label-color;
    display: $toggle-switches-label-display;
    vertical-align: $toggle-switches-label-vertical-align;
    margin: $toggle-switches-label-margin;
}

.dlt-switch-item {
    @include component-vars(toggle-switches);
    display: $toggle-switches-item-display;
    flex-direction: $toggle-switches-item-flex-direction;
    flex: $toggle-switches-item-flex;
    align-items: $toggle-switches-item-align-items;
}

.dlt-switch-input {
    position: $toggle-switches-input-position;
    width: $toggle-switches-input-width;
    height: $toggle-switches-input-height;
    padding: $toggle-switches-input-padding;
    margin: $toggle-switches-input-margin;
    overflow: $toggle-switches-input-overflow;
    clip: $toggle-switches-input-clip;
    border: $toggle-switches-input-border;
    visibility: $toggle-switches-input-visibility;
    white-space: $toggle-switches-input-white-space;

    &:focus:not(:disabled)+label .dlt-switch-appearance {
        // &:not(:disabled)+label .dlt-switch-appearance:hover::before {
        @include box-shadow($toggle-switches-input-box-shadow);
        border-color: $toggle-switches-appearance-border-color-focus;
    }
    // &:focus:not(:disabled)+label .dlt-switch-appearance::before {
    //     // &:not(:disabled)+label .dlt-switch-appearance:hover::before {
    //     @include box-shadow($toggle-switches-input-box-shadow);
    //     border: $toggle-switches-input-focus-border;
    // }
}

.dlt-switch-text {
    position: $toggle-switches-text-position;
    display: $toggle-switches-text-display;
    align-items: $toggle-switches-text-align-items;
    cursor: $toggle-switches-text-cursor;
    // margin: 1rem 0;
    margin-top: $toggle-switches-text-margin-top;
}

.dlt-switch-text-left {
    margin-right: $toggle-switches-text-left-margin-right;
}

.dlt-switch-text-right {
    margin-left: $toggle-switches-text-right-margin-left;
}

.dlt-switch-text-left,
.dlt-switch-text-right {
    color: $toggle-switches-text-left-right-color;
    position: $toggle-switches-text-left-right-position;
    font-family: $toggle-switches-text-left-right-font-family;
    font-weight: $toggle-switches-text-left-right-font-weight;
    font-size: $toggle-switches-text-left-right-font-size;
}

.on {
    display: $toggle-switches-on-display;
}

.on,
.off {
    color: $toggle-switches-on-off-color;
    position: $toggle-switches-on-off-position;
    font-family: $toggle-switches-on-off-font-family;
    font-weight: $toggle-switches-on-off-font-weight;
    font-size: $toggle-switches-on-off-font-size;
    top: $toggle-switches-on-off-top;
    left: $toggle-switches-on-off-left;
}

input:checked+.dlt-switch-text .on {
    display: $toggle-switches-checked-on-display;
}

input:checked+.dlt-switch-text .off {
    display: $toggle-switches-checked-off-display;
}

input:disabled+.dlt-switch-text {
    cursor: $toggle-switches-text-disabled-cursor;
    opacity: $toggle-switches-text-disabled-opacity;
}

.dlt-switch-appearance {
    position: $toggle-switches-appearance-position;
    left: $toggle-switches-appearance-left;
    width: $toggle-switches-appearance-width;
    height: $toggle-switches-appearance-height;
    border: $toggle-switches-appearance-border;
    border-radius: $toggle-switches-appearance-border-radius;

    &::after,
    &::before {
        position: $toggle-switches-appearance-after-before-position;
        display: $toggle-switches-appearance-after-before-display;
        content: $toggle-switches-appearance-after-before-content;
        @include transition($toggle-switches-appearance-after-before-transition);
    }

    &::before {
        // width: 100%;
        // height: 1rem;
        // top: -0.5rem;
        // border-radius: 1rem;
        // background-color: $white;
        // // border: $input-text-border-width $input-text-border-style $gray-50;
        // border: $input-text-border-width $input-text-border-style $gray-40;

        width: $toggle-switches-appearance-before-width;
        height: $toggle-switches-appearance-before-height;
        top: $toggle-switches-appearance-before-top;
        left: $toggle-switches-appearance-before-left;
        border-radius: $toggle-switches-appearance-before-border-radius;
        background-color: $toggle-switches-appearance-before-background-color;
        border: $toggle-switches-appearance-before-border;
    }

    &::after {
        box-sizing: $toggle-switches-appearance-after-box-sizing;
        top: $toggle-switches-appearance-after-top;
        left: $toggle-switches-appearance-after-left;
        width: $toggle-switches-appearance-after-width;
        height: $toggle-switches-appearance-after-height;
        background-color: $toggle-switches-appearance-after-background-color;
        border-radius: $toggle-switches-appearance-after-border-radius;
    }
}

.dlt-on-off::after {
        background-color: $toggle-switches-on-off-after-background-color;
}

.dlt-switch-input:checked+.dlt-switch-text .dlt-switch-appearance::before {
    //rename token?
    background-color: $toggle-switches-appearance-before-checked-text-background-color;
    
}

.dlt-switch-input:checked+.dlt-switch-text .dlt-switch-appearance::after {
    -webkit-transform: $toggle-switches-appearance-after-checked-text-webkit-transform;
    transform: $toggle-switches-appearance-after-checked-text-transform;
    background-color: $toggle-switches-appearance-after-background-color;
    box-shadow: $toggle-switches-appearance-after-checked-text-box-shadow;
    border-color: $toggle-switches-appearance-after-checked-text-border-color;
}

.sm-switch {
    .dlt-switch-input:checked+.dlt-switch-text .dlt-switch-appearance::after {
        left: $toggle-switches-appearance-after-checked-text-left-sm;
    }

    .dlt-switch-label {
        font-size: $toggle-switches-label-font-size-sm;
    }

    .dlt-switch-appearance {
        width: $toggle-switches-appearance-width-sm;
        height: $toggle-switches-appearance-height-sm;
        top: $toggle-switches-appearance-top-sm;
        left: $toggle-switches-appearance-left-sm;

        &::before {
            width: $toggle-switches-appearance-before-width-sm;
            height: $toggle-switches-appearance-before-height-sm;
            top: $toggle-switches-appearance-before-top-sm;
            border-radius: $toggle-switches-appearance-before-border-radius-sm;
            background-color: $toggle-switches-appearance-before-background-color-sm;
            border: $toggle-switches-appearance-before-border-sm;
        }

        &::after {
            top: $toggle-switches-appearance-after-top-sm;
            left: $toggle-switches-appearance-after-left-sm;
            width: $toggle-switches-appearance-after-width-sm;
            height: $toggle-switches-appearance-after-height-sm;
            border-radius: $toggle-switches-appearance-after-border-radius-sm;
        }
    }

    .on,
    .off {
        left: $toggle-switches-on-off-left-sm;
        top: $toggle-switches-on-off-top-sm;
        font-size: $toggle-switches-on-off-font-size-sm;
    }
}