@layer components {
    :is(button, .button) {
        margin: 0;

        display: inline-grid;

        gap: 5px;
        grid-auto-flow: column;
        align-items: center;
        justify-content: center;

        padding: var(--size-2) calc(var(--size-2) * 1.5);

        font: inherit;
        color: inherit;
        line-height: 1.2;
        text-align: center;
        white-space: nowrap;
        text-decoration: none;

        border: 0 none;
        border-radius: var(--radius-2);

        transition: color 250ms ease, background-color 250ms ease;
        transition: color 250ms ease, border 250ms ease;
        cursor: pointer;
        user-select: none;

        &.small {
            padding: 0 calc(var(--size-2) * 1.2);
            font-size: var(--font-size-0);
        }

        &.icon-left {
            grid-template-columns: auto 1fr;
        }

        &.icon {
            padding: 0;
            color: currentColor;
            background: none;
        }

        &.simple {
            border: 1px solid var(--color-bordergrey);
            background-color: var(--color-white);
        }

        &.link {
            padding: 0;
            text-decoration: underline;

            background: none;
            border: none;
        }

        &[color="blue"],
        &.blue {
            background: var(--color-darkblue);
            color: var(--color-white);
            border: 1px solid var(--color-darkblue);

            &:hover:not([disabled]) {
                background: var(--color-gunmetal);
                color: var(--color-white);
                border: 1px solid var(--color-gunmetal);
            }
        }

        &[color="green"],
        &.green {
            background: var(--color-green);
            color: var(--color-white);
            border: 1px solid var(--color-green);

            &:hover:not([disabled]) {
                background: var(--color-darkgreen);
                color: var(--color-white);
                border: 1px solid var(--color-darkgreen);
            }
        }

        &[color="purple"],
        &.purple {
            background: var(--color-purple);
            color: var(--color-white);
            border: 1px solid var(--color-purple);

            &:hover:not([disabled]) {
                background: var(--color-darkpurple);
                color: var(--color-white);
                border: 1px solid var(--color-darkpurple);
            }
        }

        &[color="red"],
        &.red {
            background: var(--color-red);
            color: var(--color-white);
            border: 1px solid var(--color-red);

            &:hover:not([disabled]) {
                background: var(--color-darkred);
                color: var(--color-white);
                border: 1px solid var(--color-darkred);
            }
        }

        &[color="orange"],
        &.orange {
            background: var(--color-altorange);
            color: var(--color-white);
            border: 1px solid var(--color-altorange);

            &:hover:not([disabled]) {
                background: var(--color-brick);
                color: var(--color-white);
                border: 1px solid var(--color-brick);
            }
        }

        &[color="yellow"],
        &.yellow {
            background: var(--color-yellow);
            color: var(--color-black);
            border: 1px solid var(--color-yellow);

            &:hover:not([disabled]) {
                background: var(--color-darkyellow);
                border: 1px solid var(--color-darkyellow);
            }
        }

        &[disabled] {
            cursor: not-allowed;
            opacity: 0.5;
            background-color: color-mix(in srgb, var(--color-black) 15%, transparent);
            border: 1px solid var(--color-dark);
            color: var(--color-dark);
        }
    }
}