bluelib/src/rules/skeleton.less

@{root} {

    // --- Root ---

    color: @bA;
    background-color: @hex-background;
    .bluelib-color(@hex-foreground);
    .font-text();


    &, @{all} {
        box-sizing: border-box;
        color: @bA;

        /* Disable outline, as we already highlight focused elements; if it's not enough, let me know */
        outline: none !important;
    }


    // --- Containers ---

    @{container-main} {
        margin-left: auto;
        margin-right: auto;
        max-width: 1280px;
    }


    // --- Panels ---
    // Remember to use BOTH the panel AND the panel-* class when using a panel element!

    // Base panel
    @{panel} {
        margin: 8px 0;
        width: 100%;

        > @{element-paragraph}, @{element-title}, @{panel} {
            &:first-child {
                margin-top: 0;
            }

            &:last-child {
                margin-bottom: 0;
            }
        }
    }

    // A generic content panel
    @{panel-box} {
        padding: 8px;
        border-radius: 4px;
        border-width: 2px;
        border-style: solid;

        background-color: @b0;
        border-color: @b1;
    }

    // A box with a quote-like border
    @{panel-blockquote} {
        border-left-width: 2px;
        border-top-width: 0;
        border-bottom-width: 0;
        border-right-width: 0;
    }

    // A box with smaller text and no border
    @{panel-aside} {
        border-width: 0;
        font-size: smaller;
    }

    // Evenly split the panels contained inside
    @{panel-split} {
        display: flex;
        flex-wrap: wrap;
        gap: 8px;
        justify-content: center;

        > @{all} {
            flex-grow: 1;
            flex-shrink: 0;
            flex-basis: 0;
        }

        > @{panel} {
            margin: 0;
        }
    }

    // --- Images ---

    @{image} {
        display: block;

        max-width: 100%;

        margin-left: auto;
        margin-right: auto;

        object-fit: contain;
    }

    @{image-free} {
        max-width: unset;
        max-height: unset;
    }

    @{image-limited} {
        max-height: max(37.5vw, 66.6vh);
    }

    // --- Forms ---

    @{form} {
        display: grid;

        align-items: center;
        row-gap: 4px;
        column-gap: 8px;

        grid-template-columns: minmax(auto, 1fr) 5fr;
    }

    @{form-label} {
        grid-column: 1;
        justify-self: end;
    }

    @{form-input} {
        grid-column: 2;
        justify-self: stretch;
        width: 100%;
    }

    @{form-submit} {
        width: auto;
    }

    @{form-buttons} {
        grid-column-start: 1;
        grid-column-end: 3;

        display: flex;
        gap: 8px;
        justify-content: center;
        align-items: center;
        width: 100%;

        margin-top: 8px;
        margin-bottom: 8px;

        &:first-child {
            margin-top: 0;
        }

        &:last-child {
            margin-bottom: 0;
        }
    }

    // --- Buttons ---

    @{button} {
        display: inline-flex;
        justify-content: center;
        align-items: center;

        background-color: @bA;
        border: none;
        color: @hex-btn-text;
        padding: 6px 16px;
        border-radius: 4px;
        font-family: inherit;
        font-size: inherit;

        cursor: pointer;

        &:hover {
            background-color: @bC;
        }

        &:focus-visible {
            outline: 4px solid @b7 !important;
        }

        &:active {
            background-color: @bF;
        }

        &@{status-disabled} {
            &:hover {
                background-color: @bA;
            }

            &:active {
                background-color: @bA;
            }
        }
    }

    @{button-fill-width} {
        width: 100%;
    }

    @{button-toggle} {
        padding: 4px 14px;
        border-width: 2px;
        border-style: solid;

        &@{status-disabled} {
            border-style: dashed;
        }
    }

    @{button-toggle-off} {
        border-color: @bA;
        color: @bA;
        background-color: @b0;

        &:hover  {
            border-color: @bC;
            color: @bC;
            background-color: @b1;
        }

        &:active {
            border-color: @bF;
            color: @bF;
            background-color: @b2;
        }

        &@{status-disabled} {
            border-style: dashed;

            &:hover  {
                border-color: @bA;
                color: @bA;
                background-color: @b0;
            }

            &:active {
                border-color: @bA;
                color: @bA;
                background-color: @b0;
            }
        }
    }

    @{button-toggle-on} {
        border-color: @bF;
        color: @bF;
        background-color: @b2;

        &:hover  {
            border-color: @bC;
            color: @bC;
            background-color: @b1;
        }

        &:active {
            border-color: @bA;
            color: @bA;
            background-color: @b0;
        }

        &@{status-disabled} {
            border-style: dashed;

            &:hover  {
                border-color: @bF;
                color: @bF;
                background-color: @b2;
            }

            &:active {
                border-color: @bF;
                color: @bF;
                background-color: @b2;
            }
        }
    }

    // --- Inputs ---

    @{input} {
        border-style: solid;
        border-color: @b3;
        color: @bA;
        background-color: @b0;

        font-family: inherit;
        font-size: inherit;

        &::placeholder {
            color: @b4;
            opacity: 1;
        }

        &:optional, &:optional::placeholder {
            font-style: italic;
        }

        // &:valid:not(:placeholder-shown) {
        //     .bluelib-color(@hex-lime);
        // }

        &:invalid:not(:placeholder-shown) {
            .bluelib-color(@hex-red);
        }

        &:hover, &:focus {
            border-color: @b6;
            color: @bF;
            background-color: @b1;

            &::placeholder {
                color: @b7;
            }
        }

        &@{status-disabled} {
            border-style: dashed;

            &:hover, &:focus {
                border-color: @b3;
                color: @bA;
                background-color: @b0;

                &::placeholder {
                    color: @b4;
                }
            }
        }
    }

    @{input-field} {
        cursor: text;

        border-width: 0 0 2px 0;
        border-radius: 4px 4px 0 0;
        padding: 4px 6px;
    }

    @{input-select}, @{input-multiselect} {
        // Browsers add 4px of unremovable horizontal padding to options for some reason
        padding: 4px 2px;
    }

    @{input-select-option}, @{input-multiselect-option} {
        font-weight: normal;
        color: @bA;

        padding: 4px 4px;

        // TODO: style checked elements, when it will be possible
    }

    @{input-select-optgroup}, @{input-multiselect-optgroup} {
        font-weight: bold;
        color: @hex-accent;

        padding: 4px 4px;

        @{input-select-option}, @{input-multiselect-option} {
            padding: 4px 20px;

            &::before {
                content: "";
            }
        }
    }

    @{input-select-optgroup}, @{input-select-option}, @{input-multiselect-optgroup}, @{input-multiselect-option} {
        font-family: inherit;
        font-size: inherit;
        font-style: inherit;
    }

    @{input-select} {
        cursor: context-menu;

        border-width: 0 0 2px 0;
        border-radius: 4px 4px 0 0;

        @media screen and (-webkit-min-device-pixel-ratio:0) {
            @{input-select-option}, @{input-select-optgroup} {
                background-color: @hex-background;
            }
        }
    }

    @{input-multiselect} {
        cursor: vertical-text;

        border-width: 0 0 0 2px;
        border-radius: 0 4px 4px 0;
    }

    // --- Element status ---

    @{status-hoverable} {
        cursor: help;
    }

    @{status-clickable} {
        cursor: pointer;
    }

    @{status-disabled} {
        cursor: not-allowed !important;
        opacity: 50%;
    }

    // --- Elements ---

    @{element-title} {
        text-align: center;
        .bluelib-color(@hex-accent);
        .font-title();
    }

    @{element-paragraph} {

    }

    @{element-separator} {
        border-width: 1px;
        border-style: solid;
        border-color: @b1;
    }

    @{element-list-item} {
        margin: 10px 0;
    }

    @{element-anchor} {
        .bluelib-color(@hex-link);
        text-decoration-line: underline;
        text-decoration-style: solid;
        text-decoration-color: currentColor;
        text-decoration-thickness: 1px;

        &:hover, &:focus {
            .bluelib-color(@hex-link-hover);
        }

        &:focus-visible {
            text-decoration-thickness: 2px;
        }

        &:active {
            .bluelib-color(@hex-link-active);
        }

        &@{status-disabled} {
            text-decoration-style: dashed;

            &:hover, &:focus {
                .bluelib-color(@hex-link);
            }

            &:active {
                .bluelib-color(@hex-link);
            }
        }
    }

    // --- Alignment ---

    @{align-left} {
        text-align: left;
    }

    @{align-center} {
        text-align: center;
    }

    @{align-right} {
        text-align: right;
    }

    // --- Sizes ---

    @{size-xxl} {
        font-size: xx-large;
    }

    @{size-xl} {
        font-size: x-large;
    }

    @{size-l} {
        font-size: large;
    }

    @{size-m} {
        font-size: medium;
    }

    @{size-s} {
        font-size: small;
    }

    @{size-xs} {
        font-size: x-small;
    }

    @{size-xxs} {
        font-size: xx-small;
    }

    // --- Styles ---

    @{style-bold} {
        font-weight: bold;
        .bluelib-color(@hex-accent);
    }

    @{style-italic} {
        font-style: italic;
    }

    @{style-underline} {
        text-decoration-line: underline;
    }

    @{style-strike} {
        text-decoration-line: line-through;
    }

    @{style-monospace} {
        .font-code();
    }

    @{style-keyboard} {
        .font-code();
        padding: 2px 4px;
        border: 2px outset;
        border-radius: 4px;
    }

    // --- Colors ---

    @{color-red} {
        .bluelib-color(@hex-red)
    }

    @{color-orange} {
        .bluelib-color(@hex-orange)
    }

    @{color-yellow} {
        .bluelib-color(@hex-yellow)
    }

    @{color-lime} {
        .bluelib-color(@hex-lime)
    }

    @{color-cyan} {
        .bluelib-color(@hex-cyan)
    }

    @{color-blue} {
        .bluelib-color(@hex-blue)
    }

    @{color-magenta} {
        .bluelib-color(@hex-magenta)
    }

    @{color-gray} {
        .bluelib-color(@hex-gray)
    }
}