@use './checkbox-theme' as *;

.kbq-checkbox__frame {
    display: flex;
    align-items: center;
    justify-content: center;

    box-sizing: border-box;
    pointer-events: none;
    background-color: transparent;

    border-radius: var(--kbq-checkbox-size-normal-border-radius);

    border: {
        width: var(--kbq-checkbox-size-normal-border-width);
        style: solid;
    }

    height: var(--kbq-checkbox-size-normal-width);
    width: var(--kbq-checkbox-size-normal-width);
}

.kbq-checkbox__layout {
    --padding: calc(var(--kbq-checkbox-size-normal-width) + var(--kbq-checkbox-size-normal-horizontal-content-padding));

    box-sizing: initial;

    // required for `.cdk-visually-hidden` input to be positioned correctly
    position: relative;

    display: inline-flex;

    max-width: calc(100% - var(--padding));

    // `cursor: inherit` ensures that the wrapper element gets the same cursor as the kbq-checkbox
    // (e.g. pointer by default, regular when disabled), instead of the browser default.
    cursor: inherit;

    padding-top: var(--kbq-checkbox-size-normal-padding-top);

    padding-bottom: var(--kbq-checkbox-size-normal-padding-bottom);

    padding-left: var(--padding);

    vertical-align: top;
}

.kbq-checkbox__inner-container {
    display: inline-block;

    position: absolute;
    top: var(--kbq-checkbox-size-normal-top);
    left: 0;
}

.kbq-checkbox {
    display: inline-block;

    cursor: pointer;
    -webkit-tap-highlight-color: transparent;

    max-width: 100%;

    .kbq-checkbox-checkmark,
    .kbq-checkbox-mixedmark {
        display: none;
    }

    &.kbq-checked {
        .kbq-checkbox-checkmark {
            display: block;
        }

        .kbq-checkbox-mixedmark {
            display: none;
        }
    }

    &.kbq-indeterminate {
        .kbq-checkbox-checkmark {
            display: none;
        }

        .kbq-checkbox-mixedmark {
            display: block;
        }
    }

    &.kbq-disabled {
        cursor: default;

        .kbq-checkbox__frame {
            box-shadow: none;
        }
    }

    & .kbq-hint {
        margin-top: var(--kbq-checkbox-size-normal-vertical-content-padding);
    }
}

.kbq-checkbox.kbq-checkbox_big {
    --padding: calc(var(--kbq-checkbox-size-big-width) + var(--kbq-checkbox-size-big-horizontal-content-padding));

    & .kbq-checkbox__inner-container {
        top: var(--kbq-checkbox-size-big-top);
        height: var(--kbq-checkbox-size-big-width);
        width: var(--kbq-checkbox-size-big-width);
    }

    & .kbq-checkbox__frame {
        border-radius: var(--kbq-checkbox-size-big-border-radius);

        border: {
            width: var(--kbq-checkbox-size-big-border-width);
            style: solid;
        }
    }

    & .kbq-hint {
        margin-top: var(--kbq-checkbox-size-big-vertical-content-padding);
    }
}

.kbq-checkbox__text-container {
    display: flex;
    flex-direction: column;

    max-width: 100%;
}

.kbq-checkbox__inner-container_no-side-margin {
    margin: {
        left: 0;
        right: 0;
    }
}

.kbq-checkbox_label-before {
    .kbq-checkbox__layout {
        padding-left: 0;
        padding-right: var(--padding);
    }

    .kbq-checkbox__inner-container {
        right: 0;
        left: unset;
    }
}

@include kbq-checkbox-theme();
@include kbq-checkbox-typography();