@import "palette.css";

.ctl-hidden {
    display: none;
}

.form-control {
    display: block;
    width: 100%;
    box-sizing: border-box;
    padding: 0.375rem 0.5rem;
    font-size: 1rem;
    color: var(--color-charcoal);
    background-color: #fff;
    background-clip: padding-box;
    border: 1px solid var(--color-ctl-border);
    border-radius: 0.25rem;
    transition: border-color .15s ease-in-out, box-shadow .15s;

    &:disabled, &:read-only {
        background-color: var(--color-light-grey);
        color: var(--color-text-secondary);
    }

    &:focus {
        outline: 0;
        box-shadow: 0 0 10px 0px var(--color-ctl-border-highlight)
    }

    &.invalid {
        border-color: var(--color-red);
    }

    &.sz-medium {
        max-width: 400px;
    }

    &.sz-small {
        max-width: 150px;
    }

    &.txt-title {
        text-transform: capitalize;
    }

    &.txt-upper {
        text-transform: uppercase;
    }
}

label {
    font-size: 1rem;
    display: block;
    margin-bottom: 0.25rem;
    color: var(--color-text-label);

    &.text {
        margin-top: 0.5rem;
    }

    &.required span::after {
        content: "*";
        color: var(--color-red);
        margin-left: 0.25rem;
    }
}

div.radio-checkbox {

    .wrapper {
        display: inline-block;
    }

    label.radio-option {
        display: flex;
        align-items: center;
        gap: 0.6rem;
        cursor: pointer;
        user-select: none;
        padding: 0.375rem 0.5rem 0.375rem 0;
        margin: 0.25rem 0;
        color: var(--color-medium-grey);

        .check {
            width: 1.4rem;
            height: 1.4rem;
            border: 2px solid var(--color-medium-grey);
            border-radius: 50%;
            background-color: white;
            transition: all 0.2s ease;
            position: relative;
        }

        &:has(input:disabled) {
            cursor: default;
        }

        &:has(input:checked) {
            color: var(--color-charcoal);

            &.active {
                background-color: var(--color-purple);
                border-color: var(--color-purple);
                color: #fff;
            }

            &.complete {
                background-color: var(--color-green-light);
            }
        }

        input:checked + .check {
            background-color: var(--color-purple);
            border-color: var(--color-purple);
        }

        &:hover {
            .check {
                border-color: var(--color-purple);
            }

            color: var(--color-charcoal);
        }

        input {
            display: none;

            &:checked + .check::after,
            &:hover + .check::after {
                content: "";
                position: absolute;
                left: 0.4rem;
                top: 0.2rem;
                width: 0.35rem;
                height: 0.6rem;
                border-style: solid;
                border-width: 0 3px 3px 0;
                transform: rotate(45deg);
            }

            &:hover + .check::after {
                border-color: var(--color-purple-light);
            }

            &:checked + .check::after {
                border-color: white;
            }
        }

        &.active {

            input {

                &:checked + .check::after,
                &:hover + .check::after {
                    left: 0.3rem;
                    top: 0.4rem;
                    width: 0.4rem;
                    height: 0.4rem;
                    border-style: solid;
                    border-width: 3px 3px 0 0;
                }
            }
        }
    }

    &.invalid {
        .wrapper {
            border: 1px solid var(--color-red);
            background-color: var(--color-red-light);
            border-radius: 0.25rem;
            padding: 0.25rem 0.5rem;
        }

        label.radio-option {
            color: var(--color-charcoal);
        }
    }
}

label.checkbox {
    display: inline-flex;
    align-items: center;
    gap: 0.6rem;
    cursor: pointer;
    user-select: none;
    padding: 0.375rem 0.5rem 0.375rem 0;
    margin: 0.25rem 0;
    color: var(--color-medium-grey);

    .check {
        width: 1.4rem;
        height: 1.4rem;
        border: 2px solid var(--color-medium-grey);
        border-radius: 0.25rem;
        background-color: white;
        transition: all 0.2s ease;
        position: relative;
    }

    &:has(input:disabled) {
        cursor: default;
    }

    &:has(input:checked) {
        color: var(--color-charcoal);

        &.active {
            background-color: var(--color-purple);
            border-color: var(--color-purple);
            color: #fff;
        }

        &.complete {
            background-color: var(--color-green-light);
        }
    }

    input:checked + .check {
        background-color: var(--color-purple);
        border-color: var(--color-purple);
    }

    &:hover {
        .check {
            border-color: var(--color-purple);
        }

        color: var(--color-charcoal);
    }

    input {
        display: none;

        &:checked + .check::after,
        &:hover + .check::after {
            content: "";
            position: absolute;
            left: 0.4rem;
            top: 0.2rem;
            width: 0.35rem;
            height: 0.6rem;
            border-style: solid;
            border-width: 0 3px 3px 0;
            transform: rotate(45deg);
        }

        &:hover + .check::after {
            border-color: var(--color-purple-light);
        }

        &:checked + .check::after {
            border-color: white;
        }
    }

    &.active {

        input {

            &:checked + .check::after,
            &:hover + .check::after {
                left: 0.3rem;
                top: 0.4rem;
                width: 0.4rem;
                height: 0.4rem;
                border-style: solid;
                border-width: 3px 3px 0 0;
            }
        }
    }
}

.msg-nudge {
    position: relative;
    padding: 0.5rem 0.75rem;
    font-size: 1rem;
    color: var(--color-dark-grey);
    background-color: var(--color-light-grey);
    border: 1px solid var(--color-dark-grey);
    border-radius: 0.25rem;
}

div.msg-info {
    position: relative;
    padding: 0.5rem 0.75rem 0.5rem 2.25rem;
    font-size: 1rem;
    color: var(--color-info);
    background-color: var(--color-info-light);
    border: 1px solid var(--color-info);
    border-radius: 0.25rem;

    &::before {
        position: absolute;
        top: 50%;
        margin-top: -0.75rem;
        margin-left: -1.75rem;
        content: "i";
        border-radius: 50%;
        width: 1.5rem;
        height: 1.5rem;
        font-size: 1rem;
        background-color: var(--color-info);
        color: #fff;
        line-height: 1.5rem;
        text-align: center;
        font-weight: bold;
    }
}

div.msg-error {
    position: relative;
    padding: 0.5rem 0.75rem 0.5rem 2.25rem;
    margin: 0.5rem 0;
    font-size: 1rem;
    color: #fff;
    background-color: var(--color-red);
    border: 1px solid var(--color-red);
    border-radius: 0.25rem;

    &::before {
        position: absolute;
        top: 50%;
        margin-top: -0.75rem;
        margin-left: -1.75rem;
        content: "!";
        border-radius: 50%;
        width: 1.5rem;
        height: 1.5rem;
        font-size: 1rem;
        background-color: #fff;
        color: var(--color-red);
        line-height: 1.5rem;
        text-align: center;
        font-weight: bold;
    }
}

.busy-container {
    opacity: 0.65;
    cursor: wait;

    input,
    select,
    textarea {
        cursor: wait;
    }
}

.pca .pcaitem {
    border: 1px solid #fff !important;

    &.pcaselected {
        background-color: var(--color-light-grey) !important;
    }

    &:hover,
    &:active {
        background-color: var(--color-blue) !important;

        span { color: var(--color-text-secondary) !important; }
    }
}