@import '../shared-styles/index';

$switcher-border-radius: nx-border-radius(m);

:host {
    position: relative;

    &.is-swapped .nx-switcher__label {
        flex-direction: row-reverse;
        justify-content: flex-end;

        &.has-label .nx-switcher__toggle {
            margin-left: nx-spacer(xs);

            [dir='rtl'] & {
                margin-right: nx-spacer(xs);
                margin-left: initial;
            }
        }
    }
}

.nx-switcher__input {
    opacity: 0;
    position: absolute;
}

.nx-switcher__control {
    cursor: pointer;
    display: flex;
    position: relative;
}
:host(.is-swapped) .nx-switcher__control {
    flex-direction: row-reverse;
    justify-content: flex-end;

    .nx-switcher__label-text {
        margin-right: nx-spacer(xs);
    }
}

.nx-switcher__label-text {
    @include type-style(switcher-large);
}

.nx-switcher__toggle {
    position: relative;
    display: inline-block;
    width: nx-spacer(4m);
    min-width: nx-spacer(4m); // fix for IE11
    height: nx-spacer(m);
    background-color: v(switcher-unchecked-background-color);
    border-radius: $switcher-border-radius;
    transition: background-color 0.2s ease;
}

:host(:not(.is-swapped)) .has-label .nx-switcher__toggle {
    margin-right: nx-spacer(xs);

    [dir='rtl'] & {
        margin-right: initial;
        margin-left: nx-spacer(xs);
    }
}

.nx-switcher__dot {
    position: absolute;
    height: nx-spacer(m) - nx-spacer(3xs);
    width: nx-spacer(m) - nx-spacer(3xs);
    left: nx-spacer(4xs);
    bottom: nx-spacer(4xs);
    background-color: v(switcher-dot-background-color);
    border-radius: $switcher-border-radius;
    transform: translate(0);
    transition: transform 0.2s ease;

    :host-context([dir='rtl']) & {
        right: nx-spacer(4xs);
        left: auto;
    }
}

// CHECKED STYLES
:host(.is-checked) {
    .nx-switcher__dot {
        transform: translate(nx-spacer(m));

        [dir='rtl'] & {
            transform: translate(nx-spacer(m) * -1);
        }
    }

    .nx-switcher__toggle {
        background-color: v(switcher-checked-background-color);
    }

    nx-icon {
        opacity: 1;
        transition: opacity 0.2s ease;
    }
}

:host(.is-checked.is-negative) {
    .nx-switcher__toggle {
        background-color: v(negative-dimmed);
    }
}

:host(.check-icon-small) {
    font-size: nx-font-size(3xs); // required to override `font-size: auto;` of the nx-icon component
}

nx-icon {
    position: absolute;
    top: nx-spacer(4xs);
    left: nx-spacer(4xs);
    opacity: 0;
    color: v(switcher-checked-icon-color);
}

// BIG
:host(.is-big) {
    .nx-switcher__toggle {
        width: nx-spacer(l);
        min-width: nx-spacer(l); // fix for IE11
        height: nx-spacer(2m);
        border-radius: nx-spacer(2m);
    }

    .nx-switcher__dot {
        height: nx-spacer(m) + nx-spacer(3xs);
        width: nx-spacer(m) + nx-spacer(3xs);
    }

    nx-icon {
        font-size: nx-font-size(s);

        [dir='rtl'] & {
            right: nx-spacer(4xs);
            left: auto;
        }
    }

    &.nx-switcher--large-label {
        .has-label {
            .nx-switcher__label-text {
                margin-top: v(switcher-big-large-label-text-margin-top);
            }

            .nx-switcher__toggle {
                margin-top: v(switcher-big-large-label-control-margin-top);
            }
        }
    }

    &.nx-switcher--small-label {
        .has-label {
            .nx-switcher__label-text {
                margin-top: v(switcher-big-small-label-text-margin-top);
            }

            .nx-switcher__toggle {
                margin-top: v(switcher-big-small-label-control-margin-top);
            }
        }
    }
}

// large FONT
:host(.nx-switcher--large-label) {
    .has-label {
        .nx-switcher__label-text {
            margin-top: v(switcher-large-label-text-margin-top);
        }

        .nx-switcher__toggle {
            margin-top: v(switcher-large-label-control-margin-top);
        }
    }
}

// SMALL FONT
:host(.nx-switcher--small-label) {
    .nx-switcher__label-text {
        @include type-style(switcher-small);
    }

    .has-label {
        .nx-switcher__label-text {
            margin-top: v(switcher-small-label-text-margin-top);
        }

        .nx-switcher__toggle {
            margin-top: v(switcher-small-label-control-margin-top);
        }
    }
}

// NEGATIVE
:host(.is-negative) {
    .nx-switcher__control {
        color: v(negative);
    }

    .nx-switcher__dot {
        background-color: v(negative);
    }

    .nx-switcher__toggle {
        background-color: v(negative-dimmed);
    }

    nx-icon {
        color: v(negative-background);
    }
}

// ARIA
:host .nx-switcher__input.cdk-keyboard-focused + .nx-switcher__control .nx-switcher__toggle {
    @include focus-style;
}

// DISABLED
:host(.is-disabled) {
    .nx-switcher__toggle {
        background-color: v(switcher-disabled-background-color);
    }

    .nx-switcher__dot {
        background-color: v(switcher-disabled-dot-background-color);
    }

    .nx-switcher__control {
        cursor: not-allowed;
        color: v(switcher-disabled-text-color);
    }

    nx-icon {
        color: v(switcher-disabled-icon-color);
    }
}

:host(.is-readonly) {
    .nx-switcher__toggle {
        background-color: v(switcher-readonly-background-color);
        border: 1px solid v(switcher-readonly-border-color);
    }

    .nx-switcher__dot {
        background-color: v(switcher-readonly-dot-background-color);
        left: 1px;
        bottom: 1px;
        nx-icon {
            color: v(switcher-readonly-icon-color);
        }
    }

    .nx-switcher__control {
        cursor: not-allowed;
        color: v(switcher-readonly-text-color);
    }
}

// ERROR
:host(.has-error) {
    .nx-switcher__toggle {
        background-color: v(danger);
    }

    nx-icon {
        color: v(danger);
    }
}

// high contrast
@media screen and (forced-colors: active) {
    :host,
    :host(.is-negative) {
        .nx-switcher__control {
            color: buttonText;
        }

        .nx-switcher__toggle {
            forced-color-adjust: none;
            color: highlightText;
            background-color: highlight;
        }

        &:not(.is-checked) {
            .nx-switcher__toggle {
                background-color: buttonFace;
                border: nx-border-size(m) solid buttonText;
                color: buttonText;
            }

            .nx-switcher__dot {
                left: 0;
                bottom: 0;
                box-shadow: 0 0 0 nx-border-size(m) buttonText;
                background-color: buttonText;
            }
        }

        &.is-checked {
            .nx-switcher__toggle {
                background-color: highlight;
            }

            .nx-switcher__dot {
                background-color: highlightText;
                color: buttonText;
            }

            .nx-switcher__dot nx-icon {
                color: highlight;
            }
        }

        // disabled
        &.is-disabled {
            .nx-switcher__control {
                color: GrayText;
            }

            .nx-switcher__toggle {
                color: GrayText;
            }

            .nx-switcher__dot {
                opacity: 1;
                background-color: GrayText;
            }
        }

        &.is-disabled:not(.is-checked) {
            .nx-switcher__toggle {
                border: nx-border-size(m) solid GrayText;
            }

            .nx-switcher__dot {
                box-shadow: 0 0 0 nx-border-size(m) GrayText;
            }
        }

        &.is-disabled.is-checked {
            .nx-switcher__toggle {
                background-color: GrayText;
            }

            .nx-switcher__dot {
                background-color: Canvas;
            }

            .nx-switcher__dot nx-icon {
                color: GrayText;
            }
        }
    }
}

// Error
.nx-switcher-error {
    margin-top: v(switcher-stack);
}
