website/src/styles/controls.css

/* @import './mixins.scss'; */

/*
Controls - for things like buttons, input, select
*/

@layer base {
    button,
    .button,
    [role='button'] {
        appearance: none;

        background: #fff;

        /* @include neo-brutalist-card; */
        border: 3px solid #222;
        border-radius: 6px;
        box-shadow: 4px 4px 0 0 #222;

        transition: all 64ms linear;

        display: grid;
        place-content: center;
        grid-auto-flow: column;
        gap: 0.25rem;

        &:hover {
            transform: translate(-1px, -1px);
            box-shadow: 5px 5px 0 0 #222;
        }

        &:active {
            transform: translate(2px, 2px);
            box-shadow: 2px 2px 0 0 #222;
        }

        & {
            padding: 0.25rem 1.5rem;

            text-decoration: none;
            color: #222;

            font-family: var(--font-secondary); /* TODO: check if this is a global variable and replace */
            font-weight: 600;

            cursor: pointer;
        }

        &.primary {
            background: #1e6733;
            color: #f4fef7;

            &:hover {
                background: #2b8b47;
            }
        }

        &.icon {
            padding: 0.25rem;
            margin-right: 0.25rem;
            margin-bottom: 0.25rem;
        }

        &.flat {
            background: transparent;
            color: #222;

            border: none;
            box-shadow: none;

            &:hover {
                background: #0002;
            }
        }
    }

    input[type='text'],
    input[type='password'] {
        width: 100%;
        min-height: 1.75rem;

        /* @include neo-brutalist-card; */
        border: 3px solid #222;
        border-radius: 6px;
        box-shadow: 4px 4px 0 0 #222;

        padding: 0 0.25rem;

        &:hover {
            background: #fdfdfd;
        }
    }

    input[type='checkbox'] {
        appearance: none;
        -webkit-appearance: none;
        -moz-appearance: none;

        width: calc(1.5rem + 1px);
        height: calc(1.5rem + 1px);

        background: #fff;
        border: 3px solid #222;
        border-radius: 4px;
        box-shadow: 3px 3px 0 0 #222;

        position: relative;
        cursor: pointer;

        transition: all 64ms linear;

        &:hover {
            transform: translate(-1px, -1px);
            box-shadow: 4px 4px 0 0 #222;
        }

        &:active {
            transform: translate(1px, 1px);
            box-shadow: 2px 2px 0 0 #222;
        }

        &:checked {
            background: #1e6733;

            &::after {
                content: '';
                position: absolute;
                top: 50%;
                left: 50%;
                transform: translate(-50%, -50%);

                width: 0.8rem;
                height: 0.8rem;
                background: #1e6733;

                clip-path: polygon(10% 55%, 35% 75%, 85% 25%, 90% 35%, 40% 95%, 5% 60%);
            }

            &:hover {
                background: #2b8b47;
            }
        }

        &:disabled {
            background: #eee;
            border-color: #888;
            box-shadow: 3px 3px 0 0 #888;
            cursor: not-allowed;

            &:hover {
                transform: none;
                box-shadow: 3px 3px 0 0 #888;
            }

            &:checked {
                background: #aaa;

                &::after {
                    background: #666;
                }
            }
        }

        &.star {
            &:checked::after {
                background: rgb(255, 197, 49);
                clip-path: polygon(
                    50% 0%,
                    61% 35%,
                    98% 35%,
                    68% 57%,
                    79% 91%,
                    50% 70%,
                    21% 91%,
                    32% 57%,
                    2% 35%,
                    39% 35%
                );
            }
        }
    }

    form {
        display: grid;
        gap: 1rem;
        padding: 2rem;

        background: #38adc1;

        min-width: 40ch;

        /* @include neo-brutalist-card($size: 3px, $offset: 9px); */
        border: 3px solid #222;
        border-radius: 6px;
        box-shadow: 9px 9px 0 0 #222;

        button,
        .button,
        [role='button'] {
            padding-left: 3rem;
            padding-right: 3rem;

            &.primary {
                background: #1c7f90;
                color: #f4fef7;

                &:hover {
                    background: #4ea2b1;
                }
            }

            &:disabled {
                background: #aaa;
                color: #666;
                cursor: not-allowed;

                &:active {
                    transform: none;
                    box-shadow: 4px 4px 0 0 #222;
                }

                &:hover {
                    background: #aaa;
                    transform: none;
                    box-shadow: 4px 4px 0 0 #222;
                }
            }
        }

        hr {
            border: none;
            width: 100%;
            height: 2px;
            background: #0003;

            margin-top: 1rem;
        }

        > .row {
            display: grid;
            grid-template-columns: auto 1fr;
            align-items: center;
            gap: 0.5rem;

            span.material-symbols-outlined {
                font-size: 1.5rem;
                color: #222;
            }

            input[type='text'],
            input[type='password'] {
                width: 100%;
                min-height: 2.5rem;
                padding-left: 0.5rem;
            }
        }

        .right {
            justify-self: end;
        }
        .left {
            justify-self: start;
        }
        .center {
            justify-self: center;
        }

        @media screen and (max-width: 1024px) {
            min-width: 0;
            padding: 1.5rem;
            gap: 1.5rem;
        }
    }

    details {
        width: 100%;

        summary {
            display: grid;
            place-content: center;
            place-items: center;

            list-style: none;
            &::-webkit-details-marker {
                display: none;
            }
        }

        .details-openned,
        .details-closed {
            display: contents;
        }

        &:not([open]) {
            .details-openned {
                display: none;
            }
        }

        &[open] {
            summary {
                padding-bottom: 1rem;
            }

            .details-closed {
                display: none;
            }
        }

        @media screen and (max-width: 1024px) {
            /* TODO: check if this is a global variable and replace */
            summary {
                place-content: stretch;
                place-items: stretch;
            }
        }
    }
}