/**
 * @license
 * Scale https://github.com/telekom/scale
 *
 * Copyright (c) 2021 Egor Kirpichev and contributors, Deutsche Telekom AG
 *
 * This Source Code Form is subject to the terms of the Mozilla Public
 * License, v. 2.0. If a copy of the MPL was not distributed with this
 * file, You can obtain one at https://mozilla.org/MPL/2.0/.
 */

/* TODO: remove `scale-checkbox duplicate selectors/prefixes when enabling shadow DOM`  */

:host,
.liquid-design-form.ldf-checkbox {
    --spacing-x: var(--telekom-spacing-unit-x2);
    --transition: all var(--telekom-motion-duration-transition)
    var(--telekom-motion-easing-standard);
    --color-text: var(--telekom-color-text-and-icon-standard);
    --color-error: var(--telekom-color-functional-danger-standard);
    --color-disabled: var(--telekom-color-text-and-icon-disabled);
    /* FIXME unused variable */
    --color-standard: var(--telekom-color-background-surface);
    --background-disabled: var(--telekom-color-ui-outlined-fill-disabled);
    --color-primary: var(--telekom-color-primary-standard);
    --color-focus: var(--telekom-color-functional-focus);
    --color-primary-hover: var(--telekom-color-text-and-icon-standard);
    --color-primary-active: var(--telekom-color-text-and-icon-standard);

    /*control*/
    --width-control: var(--telekom-spacing-unit-x4);
    --height-control: var(--telekom-spacing-unit-x4);
    --transition-control: var(--transition);
    --spacing-control: var(--telekom-spacing-unit-x05);
    --spacing-left-control: var(--telekom-spacing-unit-x1);
    --radius-control: var(--telekom-radius-small);
    --border-width-control: var(--telekom-spacing-unit-x025);

    /*helper-text*/
    --transition-helper-text: var(--transition);
    --spacing-left-helper-text: calc(var(--width-control) + var(--spacing-x));
    --font-size-helper-text: var(--telekom-typography-font-size-small);
    --font-weight-helper-text: var(--telekom-typography-font-weight-bold);
    --line-height-helper-text: var(--telekom-typography-line-spacing-standard);
    --color-helper-text: var(
            --telekom-color-text-and-icon-functional-informational
    );
    /*label*/
    --font-weight-label: var(--telekom-typography-font-weight-medium);
    --transition-label: var(--transition);

    /*icon*/
    --color-icon-checked-disabled: var(--telekom-color-text-and-icon-disabled);
    --color-icon-checked-active: var(
            --telekom-color-text-and-icon-white-standard
    );
    --width-icon: var(--telekom-spacing-unit-x3);
    --height-icon: var(--telekom-spacing-unit-x3);
    --stroke-width: var(--stroke-width-checkbox, 0.5px);
}

.liquid-design-form.ldf-checkbox {
    position: relative;
    display: flex;
    width: fit-content;
    padding: 0 2px 0 2px;
    flex-direction: column;
    color: var(--color-text);
}

.liquid-design-form.ldf-checkbox [part='icon'],
.liquid-design-form.ldf-checkbox [part='checkbox'],
.liquid-design-form.ldf-checkbox [part='label'],
.liquid-design-form.ldf-checkbox [part='helper-text'] {
    transition: var(--transition);
}

.liquid-design-form.ldf-checkbox [part='input'],
.liquid-design-form.ldf-checkbox .part-input-checkbox,
    /* :host(.hideLabel) [part='label'], */
.liquid-design-form.ldf-checkbox.hideLabel [part='label'] {
    position: absolute;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    white-space: nowrap;
    border-width: 0;
}

.liquid-design-form.ldf-checkbox [part='checkbox'] {
    display: flex;
    flex: 0 0 auto;
    justify-content: center;
    align-items: center;
    margin: var(--spacing-control) 0;
    width: var(--width-control);
    height: var(--height-control);
    border-radius: var(--radius-control);
    border: var(--border-width-control) solid
    var(--telekom-color-ui-outlined-border-standard);
}

.liquid-design-form.ldf-checkbox [part='label'] {
    font-weight: var(--font-weight-label);
    margin-left: var(--spacing-x);
}

.liquid-design-form.ldf-checkbox [part='label'] p,
.liquid-design-form.ldf-checkbox [part='label'] span.required{
    display: inline;
}

.liquid-design-form.ldf-checkbox [part='icon'] {
    width: var(--width-icon);
    height: var(--height-icon);
    color: var(--color-icon-checked-active);
}

.liquid-design-form.ldf-checkbox [part='icon'] svg {
    width: 100%;
    height: 100%;
}
.liquid-design-form.ldf-checkbox [part='icon'] svg rect,
.liquid-design-form.ldf-checkbox [part='icon'] svg path {
    stroke: currentColor;
    stroke-width: var(--stroke-width);
}

.liquid-design-form.ldf-checkbox [part='container'] {
    align-items: flex-start;
    display: flex;
}

.liquid-design-form.ldf-checkbox [part='helper-text'] {
    font-size: var(--font-size-helper-text);
    font-weight: var(--font-weight-helper-text);
    color: var(--color-helper-text);
    padding-left: calc(
            var(--width-control) + var(--spacing-x) + var(--border-width-control) * 2
    );
}

/* :host([checked]) [part='checkbox'], */
/* :host([indeterminate]) [part='checkbox'], */
.liquid-design-form.ldf-checkbox.indeterminate [part='checkbox'] {
    background: var(--telekom-color-ui-outlined-fill-standard);
    border-color: var(--telekom-color-ui-outlined-border-standard);
    color: var(--color-icon-checked-active);
}
.liquid-design-form.ldf-checkbox.indeterminate [part='icon'] {
    color: var(--color-icon-checked-active);
}

/* :host([checked]) [part='checkbox'], */
.liquid-design-form.ldf-checkbox.checked [part='checkbox']
    /* :host([indeterminate]) [part='checkbox'], */ {
    background: var(--telekom-color-primary-standard);
    border-color: var(--telekom-color-primary-standard);
    color: var(--color-icon-checked-active);
}

/* :host([checked]) [part='checkbox'], */
.liquid-design-form.ldf-checkbox [part='container']:hover
    /* :host([indeterminate]) [part='checkbox'], */
[part='checkbox'] {
    background: var(--telekom-color-ui-outlined-fill-hovered);
    border-color: var(--telekom-color-ui-outlined-border-hovered);
    color: var(--color-icon-checked-active);
}

/* :host([checked]) [part='checkbox'], */
.liquid-design-form.ldf-checkbox.checked [part='container']:hover
    /* :host([indeterminate]) [part='checkbox'], */
[part='checkbox'] {
    background: var(--telekom-color-primary-hovered);
    border-color: var(--telekom-color-ui-outlined-border-hovered);
    color: var(--color-icon-checked-active);
}

/* :host([checked]) [part='checkbox'], */
.liquid-design-form.ldf-checkbox [part='container']:active
    /* :host([indeterminate]) [part='checkbox'], */
[part='checkbox'] {
    background: var(--telekom-color-ui-outlined-fill-pressed);
    border-color: var(--telekom-color-ui-outlined-border-pressed);
    color: var(--color-icon-checked-active);
}

/* focus states */

.liquid-design-form.ldf-checkbox [part='input']:focus ~ [part='container'] [part='checkbox'],
.liquid-design-form.ldf-checkbox .part-input-checkbox:focus ~ [part='container'] [part='checkbox'] {
    box-shadow: 0 0 0 var(--telekom-spacing-unit-x05) var(--color-focus);
}

/* hover states */

.liquid-design-form.ldf-checkbox [part='container']:hover {
    color: var(--color-primary-hover);
    cursor: pointer;
}

/* :host([checked]) [part='container']:hover [part='checkbox'], */
.liquid-design-form.ldf-checkbox.checked [part='container']:hover [part='checkbox'],
    /* :host([indeterminate]) [part='container']:hover [part='checkbox'], */
.liquid-design-form.ldf-checkbox.indeterminate [part='container']:hover [part='checkbox'] {
    background: var(--telekom-color-primary-hovered);
    border-color: var(--telekom-color-primary-hovered);
}

/* active states */

.liquid-design-form.ldf-checkbox.checked [part='input']:active ~ [part='container'],
.liquid-design-form.ldf-checkbox.checked .part-input-checkbox:active ~ [part='container'],
.liquid-design-form.ldf-checkbox.checked [part='container']:active {
    color: var(--color-primary-active);
}

.liquid-design-form.ldf-checkbox [part='input']:active ~ [part='container'] [part='checkbox'],
.liquid-design-form.ldf-checkbox .part-input-checkbox:active ~ [part='container'] [part='checkbox'],
    /* :host([checked]) [part='container']:active [part='checkbox'], */
.liquid-design-form.ldf-checkbox.checked [part='container']:active [part='checkbox'],
    /* :host([indeterminate]) [part='container']:active [part='checkbox'], */
.liquid-design-form.ldf-checkbox.indeterminate [part='container']:active [part='checkbox'] {
    background: var(--telekom-color-primary-pressed);
    border-color: var(--telekom-color-primary-pressed);
}

.liquid-design-form.ldf-checkbox:not(.checked) [part='container']:active [part='checkbox'] {
    background: var(--telekom-color-ui-outlined-fill-pressed);
    border-color: var(--telekom-color-ui-outlined-border-pressed);
}

/* error states */

/* :host(.error) [part='helper-text'], */
.liquid-design-form.ldf-checkbox.error [part='helper-text'] {
    color: var(--telekom-color-text-and-icon-functional-danger);
}

/* :host(.error) [part='checkbox'], */
.liquid-design-form.ldf-checkbox.error [part='checkbox'] {
    border: 2px solid var(--color-error);
}

.liquid-design-form.ldf-checkbox.error
[part='input']:focus
~ [part='container']
[part='checkbox'],
.liquid-design-form.ldf-checkbox.error
.part-input-checkbox:focus
~ [part='container']
[part='checkbox'] {
    box-shadow: 0 0 0 var(--telekom-spacing-unit-x05) var(--color-focus);
    border: 2px solid var(--telekom-color-functional-danger-hovered);
}

.liquid-design-form.ldf-checkbox.error:hover [part='checkbox'] {
    background-color: var(--telekom-color-ui-outlined-fill-hovered);
    border: 2px solid var(--telekom-color-functional-danger-hovered);
}

.liquid-design-form.ldf-checkbox.error:active [part='checkbox'] {
    background-color: var(--telekom-color-ui-outlined-fill-pressed);
    border: 2px solid var(--telekom-color-functional-danger-pressed);
}

.liquid-design-form.ldf-checkbox.error:not(.checked) [part='container']:active [part='checkbox'] {
    background: var(--telekom-color-ui-outlined-fill-pressed);
    border: 2px solid var(--telekom-color-functional-danger-pressed);
}

.liquid-design-form.ldf-checkbox.checked.error [part='container']:hover [part='checkbox'] {
    border: 2px solid var(--telekom-color-functional-danger-hovered);
}

/* disabled states */

/* :host([disabled]), */
.liquid-design-form.ldf-checkbox.disabled {
    cursor: not-allowed;
}

/* :host([disabled]) [part='container'], */
.liquid-design-form.ldf-checkbox.disabled [part='container'],
    /* :host([disabled]) [part='helper-text'], */
.liquid-design-form.ldf-checkbox.disabled [part='helper-text'] {
    color: var(--color-disabled);
    pointer-events: none;
}

/* :host([checked][disabled]) [part='checkbox'], */
.liquid-design-form.ldf-checkbox.disabled [part='checkbox'] {
    background: var(--telekom-color-ui-solid-fill-disabled);
    border-color: var(--telekom-color-ui-outlined-border-disabled);
}

.liquid-design-form.ldf-checkbox.checked.disabled [part='checkbox'] {
    background-color: var(--telekom-color-ui-solid-disabled);
    border-color: transparent;
}

/* :host([checked][disabled]) [part='icon'], */
.liquid-design-form.ldf-checkbox.checked.disabled [part='icon'] {
    color: var(--color-icon-checked-disabled);
    background-color: var(--telekom-color-ui-solid-disabled);
}