/**
 * Layouts for Forms: General Form Styling & Booking Form
 * Breakpoints for arranging elements
 *
 * @package   CommonsBooking
 * @author Florian Egermann <florian@wielebenwir.de>
 * @license   GPL-2.0+
 * @since 2.0
 * @link      http://www.wielebenwir.de
 * @copyright 2015 wielebenwir
 */

@use "../../../global/sass/partials/variables";
@use "../../../global/sass/partials/extends";

.cb-wrapper {


    /* General form elements */

    input[type="text"],
    input[type="password"],
    input[type="email"],
    input[type="url"],
    input[type="date"],
    input[type="month"],
    input[type="time"],
    input[type="datetime"],
    input[type="datetime-local"],
    input[type="week"],
    input[type="number"],
    input[type="search"],
    input[type="tel"],
    input[type="color"],
    textarea {
        -webkit-appearance: none;
        -moz-appearance: none;
        background: variables.$color-white;
        border-radius: var(--commonsbooking-radius);
        border-style: solid;
        border-width: 0.1rem;
        border-color: variables.$color-black;
        box-shadow: none;
        display: block;
        margin: 0;
        font-size: var(--commonsbooking-font-size-normal);
        max-width: 100%;
        padding: var(--commonsbooking-spacer) var(--commonsbooking-spacer);
    }

    select {
        box-shadow: none;
        display: block;
        margin: 0;
        font-size: var(--commonsbooking-font-size-normal);
        padding: var(--commonsbooking-spacer) var(--commonsbooking-spacer);
        cursor: pointer;
    }

    .cb-action {
        @extend .cb-box;

        text-align: right;

        input {
            @extend .cb-button;
            float: right;
        }

        form {
            &#cb-booking-form-set-cancelled { // cancel OR delete button
                input {
                    background: transparent;
                    color: var(--commonsbooking-color-greyedout);

                }
            }

            &#cb-booking-form-set-confirmed { // confirm button
                input {
                    margin-left: var(--commonsbooking-spacer-big);
                }
            }
        }
    }

    input.cb-action-canceled, input.cb-action-delete_unconfirmed {
        background-color: var(--commonsbooking-color-cancel);
        box-shadow: none !important;
        font-size: 0.875rem;
    }

    input.cb-action-get_ics {
        background-color: var(--commonsbooking-color-primary);
        box-shadow: none !important;
        font-size: 0.875rem;
        float:left;
    }

    #booking-form-container,
    #booking-form-container div {
        border-bottom: 0;
        display: flow-root;
    }

    #calendar-footnote {
        color: var(--commonsbooking-textcolor-dark);
        background-color: #FFF;
        margin-top: 10px;
        padding: 10px;
        font-size: var(--commonsbooking-font-size-normal);

    }

    #booking-form {
        width: 100%; /* do not extend litepicker width */
        color: var(--commonsbooking-textcolor-dark);
        input {
            @extend .cb-button;
            float: right;
        }

        .time-selection-container {
            margin-top: var(--commonsbooking-spacer);
            text-align: center;

            .restriction {
                display: block;
            }

            > div {
                display: flex;
                align-items: center;

                @extend .cb-box-inner;
                margin-bottom: var(--commonsbooking-spacer);
                text-align: left;
                overflow: hidden;

                span, label, select {
                    float: left;
                    font-size: var(--commonsbooking-font-size-normal);
                }

                label {
                    font-weight: bold;
                }

                #resetPicker {
                    cursor: pointer;
                    font-weight: bold;
                    text-decoration: none;
                    font-size: 1rem;
                    padding: 0;
                    flex-basis: 100%;
                }

                > label {
                    flex-basis: 30%;
                }

                > div {
                    flex-basis: 70%;
                    display: flex;
                    gap: 1rem 3rem;
                    align-items: center;
                }
            }
        }
    }

    .cb-notice {
        @extend .cb-box;
        margin-bottom: var(--commonsbooking-spacer-big);
        font-size: var(--commonsbooking-font-size-big);
        vertical-align: middle;
        font-weight: bold;
        position: relative;
        background: var(--commonsbooking-color-noticebg);

        /* Post status */
        &.cb-status-unconfirmed {
            background: var(--commonsbooking-color-noticebg);
        }

        &.cb-status-confirmed {
            background: var(--commonsbooking-color-success);
        }

        &.cb-status-cancelled {
            background: var(--commonsbooking-color-success);
        }

        &.error {
            background: var(--commonsbooking-color-error);
        }
    }
    #cb-colorkey-legend {
        .colorkey-square {
            width:10px;
            height:10px;
            display:inline-block;
        }
    
        .colorkey-accept {
            background-color: var(--commonsbooking-color-accept);
        }
        
        .colorkey-cancel {
            background-color: var(--commonsbooking-color-cancel);
        }
    
        .colorkey-holiday {
            background-color: var(--commonsbooking-color-holiday);
            background: linear-gradient(135deg, var(--litepickerDayIsHolidayColorBg) 11.25%, #ffff 11.25%, #ffff 38.75%, var(--litepickerDayIsHolidayColorBg) 38.75%, var(--litepickerDayIsHolidayColorBg) 61.25%, #ffff 61.25%, #ffff 88.75%, var(--litepickerDayIsHolidayColorBg) 88.75%);
            background-size: 5px 5px;
        }
    
        .colorkey-greyedout {
            background-color: var(--commonsbooking-color-greyedout);
        }
    }
}