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;

        &: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%;
        height: 2.5rem;

        /* @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;
        }
    }

    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;
                }
            }
        }

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

            margin-top: 1rem;
        }

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

    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;
            }
        }
    }
}