form {
    background: @surface;
    color: @on-surface;
    padding: @space-md;
    border-radius: 10px;
    box-shadow: 0 10px 40px 0 rgba(0, 0, 0, 0.1);

    input,
    textarea,
    .checkbox {
        cursor: pointer;
        border: 1px solid transparent;
        background: @surface;
        color: @on-background;
        padding: @space-sm @space-md;
        width: 100%;
        max-width: 100%;
        transition: all 0.2s ease-in-out;
        outline: none;

        ::placeholder {
            color: @on-surface;
            font-weight: 400;
        }
        :-ms-input-placeholder {
            color: @on-surface;
            font-weight: 400;
        }
        ::-ms-input-placeholder {
            color: @on-surface;
            font-weight: 400;
        }

        &:focus {
            border: 1px solid @primary;
            color: @on-surface;
        }

        &[readonly] {
            opacity: 0.5;
        }
    }

    .checkbox {
        padding: 0;
        width: 30px;
        height: 30px;
        display: flex;
        justify-content: center;
        align-items: center;
        color: @primary;

        .icon {
            svg {
                width: 90% !important;
                height: 90% !important;
            }
        }

        &:hover {
            box-shadow: inset 0 0 1px 1px @primary;
        }
    }

    textarea {
        height: 200px;
    }

    button {
        width: 100%;
        background: @primary;
        color: @on-primary;
        padding: @space-xs @space-md;
        border-radius: 10px;
        border: 1px solid transparent;
        transition: @transition-default;
        font-weight: 700;
        cursor: pointer;

        &:hover {
            border-color: @on-primary;
            background-color: @primary;
            color: @on-primary;
        }

        &[disabled] {
            opacity: 0.5;
        }
    }

    .error {
        background: @error;
        color: @on-error;
        padding: @space-md;
    }
}
