form {
    --inputBorderRadius: 9px;

    div.input {
        label {
            font-weight: bold;

            sup {
                font-weight: normal;
            }
        }

        input,select,textarea {
            border-radius: 9px;
            box-shadow: var(--defaultShadow);
            border: solid 1px var(--colourPrimary);
            padding: 8px;
            display: block;
            width: 100%;
            background-color: rgba(255, 208, 0, 0.025);

            &:focus, &:active {
                border-color: var(--colourSecondary);
            }
        }
    }

    div.checkbox {
        display: flex;
        gap: 18px;
        user-select: none;

        input[type="checkbox"] {
            margin-left: 18px;
        }
    }
}

button,.button {
    display: block;
    width: fit-content;

    border: solid white 1px;
    box-shadow: var(--defaultShadow);
    border-radius: 18px;
    font-family: 'Lazy Dog';
    font-size: 1.4rem;
    padding: 8px;
    text-decoration: none;
    color: white;

    &:visited {
        text-decoration: none;
        color: white;
    }

    &:active {
        background-color: var(--colourActive);
    }

    &.block {
        text-align: center;
        display: inline-block;
        width: 100%;
    }

    &.slim {
        width: fit-content;
    }

    &.mx-auto {
        margin-left: auto;
        margin-right: auto;
    }

    &:hover:not(:disabled) {
        cursor: pointer;
    }

    &.primary {
        background-color: var(--colourPrimary);

        &:hover:not(:disabled)  {
            background-color: color-mix(in srgb, var(--colourPrimary), white 20%);;
        }
    }

    &.secondary {
        background-color: var(--colourSecondary);

        &:hover:not(:disabled)  {
            background-color: color-mix(in srgb, var(--colourSecondary), white 20%);;
        }
    }

    &.hidden-ivy {
        background-color: #194311;

        &:hover:not(:disabled)  {
            background-color: color-mix(in srgb, #194311, white 20%);;
        }
    }

    &:disabled {
        opacity: 0.5;
    }

    &:has(svg) {
        display: flex;
        align-items: center;
        justify-content: space-between;
        gap: 9px;

        svg {
            fill: white;
            width: 20px;
        }
    }
}