@import "./extras/address/Address";
@import "./extras/checkbox/Checkbox";
@import "./extras/file/FileInput";
novo-dynamic-form,
novo-form {
    display: flex;
    flex-direction: column;
    justify-content: flex-start;
    align-items: flex-start;
    max-width: 715px;
    .novo-form-container {
        display: flex;
        flex-direction: column;
        justify-content: flex-start;
        align-items: flex-start;
        width: 100%;
        form {
            width: 100%;
            novo-fieldset-header {
                background: $off-white;
                box-sizing: content-box;
                padding: 1em 1em 1em 3em;
                margin-bottom: 2em;
                display: flex;
                margin-left: -1.5em;
                margin-right: -1.5em;
                i {
                    margin-right: 10px;
                }
                h6 {
                    font-weight: 400;
                    padding: 0;
                    display: flex;
                    >i {
                        display: flex;
                        margin-top: -3px; // Icon itself is not centered in the SVG
                    }
                }
            }
            div.novo-form-row,
            td.novo-form-row {
                width: 100%;
                &:first-child {
                    >novo-control,
                    >novo-custom-control-container {
                        margin-top: 0;
                    }
                }
                novo-control,
                novo-custom-control-container {
                    margin-top: 1rem;
                    display: flex;
                    flex-direction: row;
                    align-items: center;
                    width: 100%;
                    height: auto;
                    opacity: 1;
                    .ng-touched.ng-invalid:not(.ng-pristine):not(.novo-control-container) {
                        border-bottom: 1px solid $negative !important;
                        &.valid-number {
                            border-bottom: none !important;
                        }
                    }
                    &.checklist,
                    &.file,
                    &.radio,
                    &.address {
                        .ng-touched.ng-invalid:not(.ng-pristine):not(.novo-control-container) {
                            border-bottom: none !important;
                            &.valid-number {
                                border-bottom: none !important;
                            }
                        }
                    }
                    &.date,
                    &.time,
                    &.date-time {
                        .ng-touched.ng-invalid:not(.ng-pristine):not(.novo-control-container) {
                            border-bottom: none !important;
                            >input {
                                border-bottom: 1px solid $negative !important;
                            }
                        }
                    }
                    &.hidden {
                        height: 0;
                        min-height: 0;
                        opacity: 0;
                        display: none;
                    }
                    &.disabled {
                        pointer-events: none;
                        input:not('.tiles-input') {
                            &::-webkit-input-placeholder {
                                color: darken($light, 10%) !important;
                            }
                            border-bottom-style: dashed !important;
                            color: darken(#D9DADC, 10%) !important;
                        }
                        div[type="button"] {
                            color: darken($light, 10%) !important;
                            border-bottom-style: dashed !important;
                        }
                        label {
                            color: darken($light, 10%) !important;
                            &.clear-all {
                                display: none;
                            }
                        }
                        chips {
                            border-bottom: 1px dashed darken($light, 10%) !important;
                            input {
                                border: none !important;
                            }
                            chip {
                                opacity: 0.4;
                                padding: 10px;
                                .bhi-close {
                                    display: none;
                                }
                            }
                        }
                        novo-tiles {
                            opacity: .4 !important;
                            label {
                                color: inherit !important;
                            }
                        }
                        .bhi-search,
                        .bhi-times {
                            display: none;
                        }
                        i.bhi-clock,
                        i.bhi-collapse,
                        i.bhi-search,
                        i.bhi-radio-filled,
                        i.bhi-radio-empty,
                        i.bhi-checkbox-filled,
                        i.bhi-checkbox-empty,
                        i.bhi-calendar {
                            color: darken($light, 10%) !important;
                            top: -5px;
                        }
                    }
                    novo-tip-well.active {
                        margin-bottom: 5px;
                        font-size: 1em !important;
                        >div {
                            width: 100%;
                        }
                    }
                    .field-message,
                    novo-tip-well.active {
                        font-size: 0.8em;
                        padding: 5px 0;
                        margin-left: 22px;
                        margin-bottom: 5px;
                        max-width: 530px;
                        display: flex;
                        justify-content: space-between;
                        &[hidden] {
                            display: block !important;
                            visibility: hidden;
                        }
                        &.has-tip {
                            margin-bottom: 0;
                        }
                        .character-count {
                            font-size: 12px;
                            color: $grey;
                            &.error {
                                color: $negative;
                            }
                        }
                        .messages {
                            flex: 1;
                            span.error-text {
                                color: $negative;
                                padding-bottom: 5px;
                                padding-right: 5px;
                                flex: 1;
                                display: flex;
                            }
                            .description {
                                display: flex;
                                padding-bottom: 5px;
                                flex: 1;
                            }
                        }
                    }
                    .error-message {
                        color: $negative;
                        font-size: 0.8em;
                        padding: 5px 0;
                        flex-basis: 100%;
                        margin-left: 185px;
                        margin-bottom: 5px;
                        height: 2em;
                        max-width: 530px;
                        display: flex;
                        justify-content: space-between;
                        &[hidden] {
                            display: block !important;
                            visibility: hidden;
                        }
                        .character-count {
                            font-size: 12px;
                            color: $grey;
                            &.error {
                                color: $negative;
                            }
                        }
                        span.error-text {
                            flex: 1;
                        }
                    }
                    >div.novo-control-container {
                        flex: 1;
                        display: flex;
                        flex-direction: row;
                        flex-wrap: wrap;
                        align-items: flex-start;
                        width: 100%;
                        >label {
                            color: #9e9e9e;
                            font-size: 0.9em;
                            flex: 1;
                            max-width: 130px;
                            font-weight: 500;
                            transition: 200ms ease-out;
                            margin-right: 35px;
                            text-transform: uppercase;
                            padding-top: 8px;
                            word-break: word-break;
                            overflow-wrap: break-word;
                        }
                        >div.novo-control-outer-container {
                            display: flex;
                            align-items: center;
                            max-width: 550px;
                            position: relative;
                            width: 100%;
                            i.loading {
                                display: flex;
                                align-items: center;
                                justify-content: center;
                                position: absolute;
                                right: 0;
                                top: 3px;
                                animation: rotate 1200ms linear infinite;
                                svg {
                                    width: 100%;
                                    height: 100%;
                                    max-width: 15px;
                                    max-height: 15px;
                                    .spinner {
                                        fill: $positive;
                                    }
                                }
                            }
                            .novo-control-inner-container {
                                display: flex;
                                flex-direction: column;
                                width: 100%;
                                .novo-control-inner-input-container {
                                    display: flex;
                                    flex-direction: row;
                                    align-items: center;
                                    >div.novo-control-input {
                                        width: 100%;
                                        position: relative;
                                        &[type="picker"] {
                                            align-self: auto;
                                        }
                                        &.editor {
                                            margin-bottom: 10px;
                                        }
                                        novo-quick-note {
                                            margin-bottom: 10px;
                                            textarea {
                                                line-height: inherit;
                                            }
                                            .quick-note-overlay {
                                                padding: 0;
                                            }
                                        }
                                        input {
                                            font-size: 1em;
                                            background: transparent !important;
                                            border: none;
                                            border-bottom: 1px solid #EAEAEA;
                                            border-radius: 0;
                                            outline: none;
                                            height: 2rem;
                                            width: 100%;
                                            margin: 0;
                                            padding: 0;
                                            box-shadow: none;
                                            box-sizing: content-box;
                                            transition: all 300ms;
                                            color: #26282B;
                                            &:hover {
                                                border-bottom: 1px solid lighten($dark, 47%);
                                            }
                                            &:focus {
                                                border-bottom: 1px solid $positive;
                                            }
                                            &:invalid {
                                                border-bottom: 1px solid #DA4453;
                                            }
                                        }
                                        textarea {
                                            font-size: 1em;
                                            height: 2rem;
                                            background: transparent !important;
                                            border: none;
                                            border-bottom: 1px solid #EAEAEA;
                                            border-radius: 0;
                                            outline: none;
                                            width: 100%;
                                            resize: vertical;
                                            margin: 0;
                                            padding: 5px 0;
                                            box-shadow: none;
                                            box-sizing: content-box;
                                            transition: all 300ms;
                                            transition: height 0ms;
                                            color: #26282B;
                                            &:hover {
                                                border-bottom: 1px solid lighten($dark, 47%);
                                            }
                                            &:focus {
                                                border-bottom: 1px solid $positive;
                                            }
                                            &:invalid {
                                                border-bottom: 1px solid #DA4453;
                                            }
                                        }
                                        textarea:not(.quick-note-textarea) {
                                            overflow-y: hidden !important;
                                            transition: height 0;
                                            background: transparent !important;
                                        }
                                        >div.novo-control-input-with-label {
                                            display: flex;
                                            align-items: center;
                                            input {
                                                flex: 1;
                                            }
                                            label.input-label {
                                                padding-left: 5px;
                                                color: lighten($dark, 47%);
                                            }
                                        }
                                        >div.novo-control-input-container {
                                            font-size: 1rem;
                                            flex: 1;
                                            position: relative;
                                            >i.bhi-clock,
                                            >i.bhi-search,
                                            >i.bhi-times,
                                            >i.bhi-calendar {
                                                position: absolute;
                                                right: 0;
                                                top: 0;
                                                font-size: 1.2em;
                                            }
                                            >i.bhi-times {
                                                cursor: pointer;
                                                font-size: 1.1em;
                                            }
                                            >novo-time-picker,
                                            >novo-date-picker,
                                            novo-date-time-picker {
                                                position: absolute;
                                                top: 100%;
                                                left: 0;
                                            }
                                            >div.date-time-container {
                                                position: absolute;
                                                top: 100%;
                                                left: 0;
                                                display: flex;
                                                flex-direction: column;
                                                background: #fff;
                                                z-index: 9;
                                                box-shadow: 0 1px 3px rgba(0, 0, 0, 0.3);
                                                border-bottom-right-radius: 3px;
                                                border-bottom-left-radius: 3px;
                                                border-top-left-radius: 3px;
                                                border-top-right-radius: 3px;
                                                novo-date-picker {
                                                    border-top-right-radius: 0;
                                                    border-bottom-right-radius: 0;
                                                    box-shadow: none;
                                                    border-right: 1px solid rgba($light, .5);
                                                    >.calendar {
                                                        box-shadow: none;
                                                    }
                                                }
                                                novo-time-picker {
                                                    position: absolute;
                                                    height: 100%;
                                                    width: 100%;
                                                    border-top-left-radius: 0;
                                                    border-bottom-left-radius: 0;
                                                    box-shadow: none;
                                                    .digital {
                                                        display: block;
                                                        position: absolute;
                                                        bottom: 0;
                                                        width: 100%;
                                                    }
                                                }
                                                .time-control {
                                                    border-top: 1px solid #f4f4f4;
                                                    display: flex;
                                                    align-items: center;
                                                    justify-content: center;
                                                    .am-pm {
                                                        display: flex;
                                                        flex-direction: column;
                                                        margin-left: 10px;
                                                    }
                                                }
                                            }
                                        }
                                    }
                                    i.required-indicator {
                                        height: 13px;
                                        width: 13px;
                                        font-size: 13px;
                                        margin-right: 10px;
                                        &.bhi-circle {
                                            color: $grapefruit;
                                            text-align: center;
                                            font-size: 7px;
                                        }
                                        &.bhi-check {
                                            color: $grass;
                                        }
                                        &[hidden] {
                                            display: inherit !important;
                                            visibility: hidden;
                                        }
                                        >h4 {
                                            font-weight: 500;
                                        }
                                    }
                                }
                            }
                        }
                    }
                }
            }
        }
    }
    &[dark] {
        .novo-form-container {
            form {
                form-field {
                    form-label {
                        label {
                            color: #747E86;
                        }
                    }
                    form-input {
                        address-input,
                        currency-input,
                        date-input,
                        date-time-input,
                        entity-input,
                        float-input,
                        number-input,
                        percent-input,
                        picker-input,
                        text-area,
                        text-input,
                        time-input {
                            input,
                            textarea {
                                color: $light;
                                border-bottom: 1px solid rgba(lighten($dark, 12%), .25);
                                background: transparent !important;
                                &:focus {
                                    border-bottom: 1px solid $ocean;
                                }
                            }
                        }
                        novo-select {
                            >div[type="button"] {
                                color: $light;
                                border-bottom: 1px solid rgba(lighten($dark, 12%), .25);
                                &:focus {
                                    border-bottom: 1px solid $ocean;
                                }
                            }
                        }
                    }
                }
            }
        }
    }
    address-input {
        display: flex;
        flex-flow: row wrap;
        .street-address {
            flex: 3 3 75%;
        }
        .apt {
            flex: 1 1 25%;
        }
        .city {
            flex: 2 2 40%;
        }
        .state {
            flex: 1 1 30%;
        }
        .zip {
            flex: 1 0 20%;
        }
        .country-name {
            flex: 4 4 100%;
        }
    }
    &[layout="vertical"] {
        .novo-form-container {
            form {
                div.novo-form-row {
                    novo-control,
                    novo-custom-control-container {
                        margin-top: 0;
                        &.disabled {
                            pointer-events: none;
                            input:not('.tiles-input') {
                                &::-webkit-input-placeholder {
                                    color: darken($light, 10%) !important;
                                }
                                border-bottom-style: dashed !important;
                                color: darken(#D9DADC, 10%) !important;
                            }
                            div[type="button"] {
                                color: darken($light, 10%) !important;
                                border-bottom-style: dashed !important;
                            }
                            label {
                                color: darken($light, 10%) !important;
                                &.clear-all {
                                    display: none;
                                }
                            }
                            chips {
                                border-bottom: 1px dashed darken($light, 10%) !important;
                                input {
                                    border: none !important;
                                }
                                chip {
                                    opacity: 0.4;
                                    padding: 10px;
                                    .bhi-close {
                                        display: none;
                                    }
                                }
                            }
                            novo-tiles {
                                opacity: .4 !important;
                                label {
                                    color: inherit !important;
                                }
                            }
                            .bhi-search,
                            .bhi-times {
                                display: none;
                            }
                            i.bhi-clock,
                            i.bhi-collapse,
                            i.bhi-search,
                            i.bhi-radio-filled,
                            i.bhi-radio-empty,
                            i.bhi-checkbox-filled,
                            i.bhi-checkbox-empty,
                            i.bhi-calendar {
                                color: darken($light, 10%) !important;
                                top: -5px;
                            }
                        }
                        .novo-control-container {
                            flex-direction: column;
                            align-items: flex-start;
                            position: relative;
                            margin-top: 16px;
                            .novo-control-outer-container {
                                max-width: 550px;
                                width: 100%;
                                .novo-control-inner-container {
                                    position: relative;
                                    .novo-control-inner-input-container {
                                        align-items: center;
                                        position: relative;
                                        i.required-indicator {
                                            &.bhi-circle {
                                                padding-top: 2px;
                                            }
                                            &.bhi-check {
                                                margin-top: -4px;
                                            }
                                        }
                                        .novo-control-input-container.novo-control-input-with-label {
                                            flex-direction: row;
                                            display: flex;
                                        }
                                    }
                                }
                                >label.novo-control-label {
                                    bottom: 20px;
                                    color: #9e9e9e;
                                    font-size: 0.9em;
                                    font-weight: 500;
                                    text-transform: uppercase;
                                    position: absolute;
                                    left: 22px;
                                    pointer-events: none;
                                    z-index: 1;
                                    width: 100%;
                                    display: block;
                                    cursor: text;
                                    white-space: nowrap;
                                    text-overflow: ellipsis;
                                    overflow-x: hidden;
                                    transform: translateY(0);
                                    transform-origin: bottom left;
                                    transition: transform 400ms cubic-bezier(0.25, 0.8, 0.25, 1), scale 400ms cubic-bezier(0.25, 0.8, 0.25, 1), color 400ms cubic-bezier(0.25, 0.8, 0.25, 1), width 400ms cubic-bezier(0.25, 0.8, 0.25, 1);
                                    &.novo-control-empty {
                                        display: block;
                                        cursor: text;
                                        top: 7px;
                                        bottom: 0;
                                    }
                                    &.novo-control-extra-spacing,
                                    &.novo-control-always-active {
                                        top: 0;
                                    }
                                    &.novo-control-always-active,
                                    &.novo-control-focused,
                                    &.novo-control-filled {
                                        display: block;
                                        transform: translateY(-100%);
                                        height: 1.5em;
                                        top: 0;
                                    }
                                }
                                .address,
                                .checkbox,
                                .checklist,
                                .file,
                                .select,
                                .tiles {
                                    margin-top: 0.5em;
                                }
                            }
                            novo-tip-well.active {
                                margin-bottom: 5px;
                                font-size: 1em !important;
                                >div {
                                    width: 100%;
                                }
                            }
                            .field-message,
                            novo-tip-well.active {
                                justify-content: space-between;
                                display: flex;
                                margin-left: 22px;
                                padding-left: 0;
                                .messages {
                                    min-height: 10px;
                                }
                                &.has-tip {
                                    margin-bottom: 0;
                                }
                            }
                        }
                    }
                }
            }
        }
    }
}

control-confirm-modal {
    h2 {
        display: flex;
        align-items: center;
        justify-content: center;
        i {
            font-size: 0.8em;
            margin: 0 0.5em;
        }
        label {
            margin-right: 10px;
        }
    }
}

@keyframes iconEnter {
    0% {
        opacity: 0;
        transform: scale(.8);
    }
    90% {
        opacity: 1;
        transform: scale(1.1);
    }
    100% {
        opacity: 1;
        transform: scale(1);
    }
}