//
//  DIALTONE
//  COMPONENTS: RADIOS & CHECKBOXES
//
//  These are input classes for Dialpad's design system Dialtone.
//  For further documentation of these and other classes,
//  visit https://dialtone.dialpad.com/components/inputs
//
//  TABLE OF CONTENTS
//  • SHARED STYLES
//  • WRAPPERS
//  • INPUT & COPY BLOCKS
//  • LABELS
//  • CHECKBOXES
//    - Modifications
//  • RADIOS
//    - Modifications
//
//  ============================================================================
//  $   RADIOS & CHECKBOXES
//  ----------------------------------------------------------------------------

.d-checkbox,
.d-radio {
    //  Component specific CSS Vars
    //  ------------------------------------------------------------------------
    --check-radio-color-border: var(--dt-checkbox-color-border-unchecked);
    --check-radio-color-border-hover: var(--dt-checkbox-color-border-unchecked-hover);
    --check-radio-color-border-checked: var(--dt-checkbox-color-border-checked);
    --check-radio-color-border-disabled: var(--dt-inputs-color-border-disabled);
    --check-radio-color-background: var(--dt-inputs-color-background-default);
    --check-radio-color-background-checked: var(--dt-checkbox-color-background-checked);
    --check-radio-color-background-disabled: var(--dt-inputs-color-background-disabled);
    --check-radio-border-width: var(--dt-size-border-100);

    //  [1] Check to see if we can use custom styles, if so reset the defaults
    //  ------------------------------------------------------------------------
    @supports ((-webkit-appearance: none) or (-moz-appearance: none) or (appearance: none)) {
        width: var(--dt-size-500); // 16
        height: var(--dt-size-500); // 16

        //  [2]  Now re-style the checkboxes and radios
        //  --------------------------------------------------------------------
        margin: 0;
        font-size: inherit;
        background-color: var(--check-radio-color-background);
        border: var(--check-radio-border-width) solid var(--check-radio-color-border);
        outline: 0;
        box-shadow: none;
        cursor: pointer;
        -webkit-appearance: none;
           -moz-appearance: none;
                appearance: none;

        &::-ms-check {
            display: none;
        }

        &:not(:disabled):hover {
            border-color: var(--check-radio-color-border-hover);
        }

        &:checked {
            --check-radio-color-border: var(--check-radio-color-border-checked);
        }
    }

    flex: 0 auto;
    align-self: flex-start;
    transition-timing-function: var(--ttf-out-quint);
    transition-duration: var(--td200);
    transition-property: box-shadow;

    //  --  DISABLED
    &[disabled],
    &--disabled {
        --check-radio-color: var(--dt-color-foreground-disabled);
        --check-radio-color-border: var(--check-radio-color-border-disabled);
        --check-radio-color-background: var(--check-radio-color-background-disabled);

        cursor: not-allowed;
    }
}


//  ============================================================================
//  $   RADIO / CHECKBOX WRAPPERS
//  ----------------------------------------------------------------------------
.d-checkbox-group,
.d-radio-group {
    display: inline-flex;
    gap: var(--dt-space-400); // 8
    cursor: pointer;
}
//  --  Wrapper Disabled State
.d-checkbox-group--disabled,
.d-radio-group--disabled {
    cursor: not-allowed;

    .d-checkbox__label,
    .d-radio__label {
        color: var(--dt-color-foreground-disabled);
        cursor: not-allowed;
    }
}

.d-input-group__fieldset {
    display: flex;
    flex-direction: column;
    align-items: flex-start;

    &__label {
        display: flex;
        flex: 1 0%;
        align-items: baseline;
        justify-content: space-between;
        box-sizing: border-box;
        margin-bottom: var(--dt-space-300);
        color: var(--dt-color-foreground-secondary);
        font-weight: var(--dt-font-weight-semi-bold);
        font-size: var(--dt-font-size-200);
        font-family: inherit;
        line-height: var(--dt-font-line-height-300);
        overflow-wrap: break-word;
    }
}


//  ============================================================================
//  $   INPUT BLOCKS
//      This holds the radio or checkbox input
//  ----------------------------------------------------------------------------
.d-checkbox__input,
.d-radio__input {
    display: flex;
    align-self: flex-start;
    padding-top: var(--dt-space-300);
}


//  ============================================================================
//  $   COPY BLOCKS
//      This holds the label and description copy
//  ----------------------------------------------------------------------------
.d-checkbox__copy,
.d-radio__copy {
    display: inline-flex;
    flex-direction: column;
}

.d-checkbox__label,
.d-radio__label {
    display: inline-flex;
    flex: 1 auto;
    flex-direction: column;
    align-items: flex-start;
    color: var(--dt-color-foreground-primary);
    font: var(--dt-typography-label-md-plain);
    cursor: pointer;
}

.d-checkbox__messages,
.d-radio__messages {
    margin-top: var(--dt-space-200-negative);
    margin-left: var(--dt-space-550);
}

.d-checkbox__description {
    display: flex;
    box-sizing: border-box;
    color: var(--dt-color-foreground-tertiary);
    font-size: var(--dt-font-size-100);
    font-family: inherit;
    line-height: var(--dt-font-line-height-400);
    fill: currentColor;
  }

//  ============================================================================
//  $   CHECKBOXES
//  ----------------------------------------------------------------------------
.d-checkbox {
    @supports ((-webkit-appearance: none) or (-moz-appearance: none) or (appearance: none)) {
        background-repeat: no-repeat;
        background-position: center center;
        background-size: auto;
        border-radius: var(--dt-size-radius-300);

        &:focus,
        &:focus-visible,
        &:checked:focus-visible {
            box-shadow: var(--dt-shadow-focus);
        }

        &:checked {
            --check-radio-color-background: var(--check-radio-color-background-checked);

            background-image: url("data:image/svg+xml,<svg width='14' height='14' viewBox='0 0 14 14' fill='none' xmlns='http://www.w3.org/2000/svg'> <path fill-rule='evenodd' clip-rule='evenodd' d='M12.1083 3.05806C12.3524 3.30214 12.3524 3.69786 12.1083 3.94194L5.69162 10.3586C5.44754 10.6027 5.05181 10.6027 4.80773 10.3586L1.89107 7.44194C1.64699 7.19786 1.64699 6.80214 1.89107 6.55806C2.13514 6.31398 2.53087 6.31398 2.77495 6.55806L5.24967 9.03278L11.2244 3.05806C11.4685 2.81398 11.8642 2.81398 12.1083 3.05806Z' fill='white'/> </svg>");
            border: 0;

            [data-dt-theme="dark"] & {
                background-image: url("data:image/svg+xml,<svg width='14' height='14' viewBox='0 0 14 14' fill='none' xmlns='http://www.w3.org/2000/svg'> <path fill-rule='evenodd' clip-rule='evenodd' d='M12.1083 3.05806C12.3524 3.30214 12.3524 3.69786 12.1083 3.94194L5.69162 10.3586C5.44754 10.6027 5.05181 10.6027 4.80773 10.3586L1.89107 7.44194C1.64699 7.19786 1.64699 6.80214 1.89107 6.55806C2.13514 6.31398 2.53087 6.31398 2.77495 6.55806L5.24967 9.03278L11.2244 3.05806C11.4685 2.81398 11.8642 2.81398 12.1083 3.05806Z' fill='black'/> </svg>");
            }

            //  Disabled
            &[disabled] {
                --check-radio-color-background: var(--check-radio-color-background-disabled);

                background-image: url("data:image/svg+xml,<svg width='14' height='14' viewBox='0 0 14 14' fill='none' xmlns='http://www.w3.org/2000/svg'> <path fill-rule='evenodd' clip-rule='evenodd' d='M12.1083 3.05806C12.3524 3.30214 12.3524 3.69786 12.1083 3.94194L5.69162 10.3586C5.44754 10.6027 5.05181 10.6027 4.80773 10.3586L1.89107 7.44194C1.64699 7.19786 1.64699 6.80214 1.89107 6.55806C2.13514 6.31398 2.53087 6.31398 2.77495 6.55806L5.24967 9.03278L11.2244 3.05806C11.4685 2.81398 11.8642 2.81398 12.1083 3.05806Z' fill='gray'/> </svg>");
            }
        }

        &--disabled:checked {
            --check-radio-color-background: var(--check-radio-color-background-disabled);
            --check-radio-color-border: var(--check-radio-color-border-disabled);

            background-image: url("data:image/svg+xml,<svg width='14' height='14' viewBox='0 0 14 14' fill='none' xmlns='http://www.w3.org/2000/svg'> <path fill-rule='evenodd' clip-rule='evenodd' d='M12.1083 3.05806C12.3524 3.30214 12.3524 3.69786 12.1083 3.94194L5.69162 10.3586C5.44754 10.6027 5.05181 10.6027 4.80773 10.3586L1.89107 7.44194C1.64699 7.19786 1.64699 6.80214 1.89107 6.55806C2.13514 6.31398 2.53087 6.31398 2.77495 6.55806L5.24967 9.03278L11.2244 3.05806C11.4685 2.81398 11.8642 2.81398 12.1083 3.05806Z' fill='gray'/> </svg>");
        }

        &--indeterminate,
        &:indeterminate {
            --check-radio-color-background: var(--check-radio-color-background-checked);
            --check-radio-color-border: var(--check-radio-color-border-checked);

            background-image: url("data:image/svg+xml,<svg width='14' height='14' viewBox='0 0 14 14' fill='none' xmlns='http://www.w3.org/2000/svg'> <path d='M11.9955 7C11.9955 7.55228 11.5478 8 10.9955 8H3.00415C2.45187 8 2.00415 7.55228 2.00415 7V7C2.00415 6.44772 2.45187 6 3.00415 6H10.9955C11.5478 6 11.9955 6.44772 11.9955 7V7Z' fill='white'/> </svg>");
            border: 0;

            [data-dt-theme="dark"] & {
                background-image: url("data:image/svg+xml,<svg width='14' height='14' viewBox='0 0 14 14' fill='none' xmlns='http://www.w3.org/2000/svg'> <path d='M11.9955 7C11.9955 7.55228 11.5478 8 10.9955 8H3.00415C2.45187 8 2.00415 7.55228 2.00415 7V7C2.00415 6.44772 2.45187 6 3.00415 6H10.9955C11.5478 6 11.9955 6.44772 11.9955 7V7Z' fill='black'/> </svg>");
            }

            &[disabled] {
                --check-radio-color-background: var(--check-radio-color-background-disabled);
                --check-radio-color-border: var(--check-radio-color-border-disabled);

                background-image: url("data:image/svg+xml,<svg width='14' height='14' viewBox='0 0 14 14' fill='none' xmlns='http://www.w3.org/2000/svg'> <path d='M11.9955 7C11.9955 7.55228 11.5478 8 10.9955 8H3.00415C2.45187 8 2.00415 7.55228 2.00415 7V7C2.00415 6.44772 2.45187 6 3.00415 6H10.9955C11.5478 6 11.9955 6.44772 11.9955 7V7Z' fill='gray'/> </svg>");
            }
        }

        &--indeterminate&--disabled,
        &:indeterminate&--disabled {
            --check-radio-color-background: var(--check-radio-color-background-disabled);
            --check-radio-color-border: var(--check-radio-color-border-disabled);

            background-image: url("data:image/svg+xml,<svg width='14' height='14' viewBox='0 0 24 24' xmlns='http://www.w3.org/2000/svg'><path d='M19 13H5v-2h14v2z' fill='hsl(240, 10%, 51%)'/></svg>");
        }

        //  Disabled
        &[disabled],
        &--disabled {
            --check-radio-color: var(--dt-color-foreground-disabled);
            --check-radio-color-border: var(--check-radio-color-border-disabled);
            --check-radio-color-background: var(--check-radio-color-background-disabled);
        }
    }
}

//  ============================================================================
//  $   RADIOS
//  ----------------------------------------------------------------------------
.d-radio {
    @supports ((-webkit-appearance: none) or (-moz-appearance: none) or (appearance: none)) {
        border-radius: var(--dt-size-radius-circle);

        // Disabled
        &[disabled],
        &--disabled {
            --check-radio-color: var(--dt-color-foreground-disabled);
            --check-radio-color-border: var(--check-radio-color-border-disabled);
            --check-radio-color-background: var(--check-radio-color-background-disabled);
        }

        &:checked {
            --check-radio-color-background: var(--check-radio-color-background-checked);

            border-color: transparent;
            box-shadow: inset 0 0 0 var(--dt-size-200) var(--dt-radio-color-foreground-checked);

            // Disabled
            &[disabled] {
                --check-radio-color-background: var(--check-radio-color-background-disabled);
            }
        }

        &:focus,
        &:focus-visible,
        &:checked:focus-visible {
          box-shadow: var(--dt-shadow-focus), inset 0 0 0 var(--dt-size-200) var(--dt-radio-color-foreground-checked);
        }

        &--disabled:checked {
            --check-radio-color-border: var(--check-radio-color-border-disabled);
            --check-radio-color-background: var(--check-radio-color-background-disabled);
        }
    }
}