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

$check-icon-border-size: nx-border-size(m);
$check-icon-size: nx-spacer(2m);

:host-context(.is-responsive) {
    @include media-breakpoint-down('small') {
        display: none;
    }
}

:host {
    display: flex;
    flex-direction: column;
    padding: 0;
    align-items: center;
    cursor: pointer;
    position: relative;
    text-align: center;

    .nx-toggle-circle__label-text {
        @include type-style(circle-toggle-label);
        color: v(circle-toggle-label-color);
        position: relative;
        display: inline-block;
        padding-top: nx-spacer(xs);
        max-width: 16rem;
        z-index: 1;

        @include media-breakpoint-response(mobile) {
            @include type-style(circle-toggle-label-mobile);
        }
    }

    .is-label-bold {
        font-weight: nx-font-weight(bold);

        @include media-breakpoint-down('small') {
            font-weight: nx-font-weight(regular);
        }
    }

    .nx-toggle-circle__icon-wrapper {
        height: nx-spacer(3xl);
        width: nx-spacer(3xl);
        border-radius: 50%;
        border-width: $check-icon-border-size;
        border-style: solid;
        border-color: v(circle-toggle-border-color);
        display: flex;
        align-items: center;
        justify-content: center;
        transition:
            background-color 0.2s ease,
            border-color 0.2s ease,
            box-shadow 0.2s ease;

        @include media-breakpoint-response(mobile) {
            height: nx-spacer(xl);
            width: nx-spacer(xl);

            .nx-toggle-circle__icon nx-icon {
                font-size: nx-font-size(l);
            }
        }
    }

    .nx-toggle-circle__check-icon {
        background-color: v(circle-toggle-checkmark-background-color);
        color: v(circle-toggle-checkmark-color);
        border-color: v(circle-toggle-checkmark-border-color);
        border-radius: 50%;
        border-width: $check-icon-border-size;
        border-style: solid;
        font-size: nx-font-size(s);
        width: $check-icon-size;
        height: $check-icon-size;
        position: absolute;
        top: -#{nx-spacer(2xs)};
        right: calc(50% - #{nx-spacer(4m)});
        transition: opacity 0.3s;
        z-index: 1;
        opacity: 0;
        display: flex;
        justify-content: center;
        align-items: center;

        [dir='rtl'] & {
            left: calc(50% - #{nx-spacer(4m)});
            right: auto;
        }
    }

    .nx-toggle-circle__check-focus {
        border-radius: 50%;
        width: $check-icon-size - 2 * $check-icon-border-size;
        height: $check-icon-size - 2 * $check-icon-border-size;
        position: absolute;
        top: -#{nx-spacer(2xs) - $check-icon-border-size};
        right: calc(50% - #{nx-spacer(4m)} + #{$check-icon-border-size});
        z-index: -1;
        opacity: 0;
        transition: box-shadow 0.2s ease;

        [dir='rtl'] & {
            left: calc(50% - #{nx-spacer(4m)} + #{$check-icon-border-size});
            right: auto;
        }
    }

    .nx-toggle-circle__content-text {
        @include type-style(circle-toggle-content-text);
        color: v(circle-toggle-content-text-color);

        @include media-breakpoint-response(mobile) {
            @include type-style(circle-toggle-content-text-mobile);
        }
    }

    .nx-toggle-circle__label-hint {
        @include type-style(circle-toggle-hint);
        color: v(circle-toggle-hint-color);
        display: inline-block;
        transition: color 0.2s ease;
        z-index: 1;
        max-width: 16rem;

        // mobile styles (not responsive version -> circle icons just get smaller)
        @include media-breakpoint-down('small') {
            .nx-toggle-circle__icon-wrapper {
                width: nx-spacer(xl);
                height: nx-spacer(xl);
            }

            .nx-toggle-circle__icon nx-icon {
                font-size: nx-spacer(2m);
            }

            .nx-toggle-circle__check-icon {
                right: calc(50% - #{nx-spacer(3m)});

                [dir='rtl'] & {
                    left: calc(50% - #{nx-spacer(3m)});
                    right: auto;
                }
            }

            .nx-toggle-circle__icon-image {
                width: nx-spacer(xl);
                height: nx-spacer(xl);
            }
        }

        @include media-breakpoint-response(mobile) {
            @include type-style(circle-toggle-hint-mobile);
        }
    }

    .nx-toggle-circle__icon {
        display: flex;
        justify-content: center;
        align-content: center;
    }

    .nx-toggle-circle__icon nx-icon {
        color: v(circle-toggle-icon-color);
    }

    .nx-toggle-circle__icon-image {
        pointer-events: none;
        position: relative;
        user-select: none;
    }
}

:host-context(.is-expert) {
    .nx-toggle-circle__icon-wrapper {
        height: nx-spacer(xl);
        width: nx-spacer(xl);

        .nx-toggle-circle__icon nx-icon {
            font-size: nx-font-size(l);
        }
    }

    .nx-toggle-circle__label-text {
        @include type-style(circle-toggle-label-mobile);
    }

    .is-label-bold {
        font-weight: nx-font-weight(regular);
    }

    .nx-toggle-circle__content-text {
        @include type-style(circle-toggle-content-text-mobile);
    }

    .nx-toggle-circle__label-hint {
        @include type-style(circle-toggle-hint-mobile);

        .nx-toggle-circle__icon-wrapper {
            width: nx-spacer(xl);
            height: nx-spacer(xl);
        }

        .nx-toggle-circle__icon nx-icon {
            font-size: nx-spacer(2m);
        }

        .nx-toggle-circle__check-icon {
            right: calc(50% - #{nx-spacer(3m)});

            [dir='rtl'] & {
                left: calc(50% - #{nx-spacer(3m)});
                right: auto;
            }
        }

        .nx-toggle-circle__icon-image {
            width: nx-spacer(xl);
            height: nx-spacer(xl);
        }
    }
}

:host(.is-flipped) {
    .nx-toggle-circle__icon-wrapper {
        background-color: v(circle-toggle-selected-background-color);
        border-color: v(circle-toggle-selected-border-color);
    }

    .nx-toggle-circle__icon nx-icon {
        color: v(circle-toggle-selected-icon-color);
    }

    .nx-toggle-circle__content-text {
        color: v(circle-toggle-selected-content-text-color);
    }

    .nx-toggle-circle__check-icon,
    .nx-toggle-circle__check-focus {
        opacity: 1;
    }
}

//HOVER STYLES
:host:not(.is-disabled):not(.is-readonly):not(.is-negative):not(.is-touched):hover {
    .nx-toggle-circle__icon-wrapper {
        border-color: v(circle-toggle-hover-border-color);
        background-color: v(circle-toggle-hover-background-color);
    }

    // if button is not checked, the hover color is a little lighter
    &:not(.is-flipped) {
        .nx-toggle-circle__icon-wrapper {
            // use -selected- tokens because the unchecked toggles should have selected color on hover
            border-color: v(circle-toggle-selected-border-color);
            background-color: v(circle-toggle-selected-background-color);
        }
    }

    .nx-toggle-circle__content-text {
        color: v(circle-toggle-hover-icon-color);
    }

    .nx-toggle-circle__icon nx-icon {
        color: v(circle-toggle-hover-icon-color);
    }
}

:host:hover.is-flipped:not(.has-checkmark):not(.is-disabled) {
    cursor: auto;
}

// DISABLED
:host(.is-disabled) {
    opacity: 0.4;
    cursor: not-allowed;
}

:host(.is-readonly) {
    cursor: not-allowed;

    .nx-toggle-circle__icon-wrapper {
        border-color: v(circle-toggle-readonly-border-color);
        background-color: v(circle-toggle-readonly-background-color);
    }

    &.is-flipped {
        .nx-toggle-circle__icon-wrapper {
            background-color: v(circle-toggle-readonly-selected-background-color);
        }

        .nx-toggle-circle__icon nx-icon,
        .nx-toggle-circle__content-text {
            color: v(circle-toggle-readonly-selected-icon-color);
        }
    }

    .nx-toggle-circle__icon nx-icon,
    .nx-toggle-circle__content-text {
        color: v(circle-toggle-readonly-icon-color);
    }
}

// negative styles
:host(.is-negative) {
    .nx-toggle-circle__icon-wrapper {
        border-color: v(negative);
        background-color: transparent;
    }

    .nx-toggle-circle__icon nx-icon,
    .nx-toggle-circle__label-text,
    .nx-toggle-circle__label-hint,
    .nx-toggle-circle__content-text {
        color: v(negative);
    }
}

:host(.is-negative.is-flipped),
:host(.is-negative):not(.is-disabled):not(.is-touched):hover {
    .nx-toggle-circle__icon-wrapper {
        border-color: v(negative);
        background-color: v(negative);
    }

    .nx-toggle-circle__icon nx-icon {
        color: v(negative-accent);
    }

    .nx-toggle-circle__content-text {
        color: v(negative-accent);
    }
}

@media screen and (forced-colors: active) {
    :host {
        forced-color-adjust: none;

        .nx-toggle-circle__icon-wrapper,
        .nx-toggle-circle__check-icon {
            border-color: buttonText !important;
            color: buttonText !important;
            background: buttonFace !important;
        }

        .nx-toggle-circle__content-text,
        .nx-toggle-circle__label-text,
        .nx-toggle-circle__label-hint {
            color: buttonText !important;
        }

        &.is-flipped {
            .nx-toggle-circle__icon-wrapper {
                background: highlight !important;
                border-color: highlightText !important;
                forced-color-adjust: none;
            }
        }

        &.is-disabled {
            opacity: 1;

            .nx-toggle-circle__icon-wrapper,
            .nx-toggle-circle__check-icon {
                background: Canvas !important;
                border-color: GrayText !important;
                color: GrayText !important;
            }

            .nx-toggle-circle__label-text,
            .nx-toggle-circle__label-hint {
                color: GrayText !important;
            }
        }
    }
}
