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

    strong {
        color: @primary;
        font-weight: 700;
    }

    .titles {
        flex-grow: 1;

        .title,
        .subTitle {
            text-align: left;
            color: @on-surface;
            margin: 0;
        }
    }

    .icon {
        width: 80px;
        height: 80px;
        display: flex;
        justify-content: center;
        align-items: center;
        flex-shrink: 0;
        border-radius: 100%;

        img {
            width: 50%;
        }
    }

    .collapse-icon {
        cursor: pointer;

        svg {
            transition: @transition-default;
        }

        &.collapsed svg {
            transform: rotate(-90deg);
        }
    }

    input,
    textarea,
    .checkbox {
        border: 1px solid transparent;
        border-radius: 10px;
        box-shadow: inset 0 0 10px 0 rgba(0, 0, 0, 0.1);
        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: @primary;
        }

        &[readonly] {
            opacity: 0.5;
        }
    }

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

        &:hover {
            box-shadow: inset 0 0 10px 0 @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;
    }
}
