@import './ca-input.colors.scss';
@import "theme/variables.scss";
// -------------------- Input Label --------------------
.input-label {
    position: absolute;
    top: 4px;
    left: 6px;
    font-size: 14px;
    line-height: 18px;
    -webkit-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    user-select: none;
    pointer-events: none;
    transition: 0.3s ease-in-out;

    span {
        &::-moz-selection {
            background-color: $default-label-background-selection !important;
            color: $default-label !important;
        }

        &::selection {
            background-color: $default-label-background-selection !important;
            color: $default-label !important;
        }
    }

    &.required {
        &::after {
            content: ' *';
            color: $input-required-star;
        }
    }

    &.inactive-empty {
        color: $inactive-empty-label !important;
    }

    &.up-label {
        top: -17px;
        left: 6px;
        font-size: 11px;
        font-weight: $input-label-font-weight-600;
    }

    &.in-label {
        top: 4px !important;
        font-size: 11px !important;
        font-weight: 600 !important;
        transition: none !important;

        &.in-label-focus {
            color: $default-focus-in-input-label !important;
        }
    }

    &.no-transition {
        transition: none !important;
    }

    &.input-placeholderIcon-on {
        left: 37px;

        &.up-label {
            left: 36px;
        }
    }

    &.hidden {
        display: none !important;
    }

    &.required-label {
        span {
            color: $red-9
        }
    }

    &.load-shipper {
        .load-shipper {
            display: grid;
            grid-template-columns: 455px 120px;
            align-items: center;

            span {
                &:nth-child(2) {
                    text-align: right;
                    color: $default-removed-background-text;
                    font-size: 11px;
                    font-weight: $input-label-font-weight-600;
                }
            }
        }

        &.required {
            &::after {
                position: absolute;
                right: 0px;
                left: 60px;
                top: 0px;
            }
        }

        &.multiple-labels,
        &.up-label {
            &.required {
                &::after {
                    transition-delay: 100ms;
                    transition-timing-function: ease-in;
                    position: absolute;
                    right: 0px;
                    left: 48px;
                    top: 0px;
                }
            }
        }
    }

    //------------------------- Multiple Labels Classs -------------------------

    // Load Dispatched TTD
    .load-dispatches-ttd {
        display: grid;
        grid-template-columns: 92px 89px 182px 53px;
        align-items: center;
        -moz-column-gap: 65px;
        grid-column-gap: 65px;
        column-gap: 65px;
        span {
            &:nth-child(4) {
                color: $default-label !important;
                opacity: 0;
                top: -19px;
                font-size: 11px;
                font-weight: $input-label-font-weight-600;
            }
        }

        &.multiple-labels-position-on-focus {
            span {
                &:nth-child(4) {
                    transition-delay: 300ms;
                    color: $default-removed-background-text !important;
                    opacity: 1;
                    top: -19px;
                }
            }
        }
    }

    &.dropdown-double-column {
        & > * {
            display: grid;
            grid-template-columns: 118px 1fr;
            align-items: center;
            -moz-column-gap: 4px;
            grid-column-gap: 4px;
            column-gap: 4px;
        }
    }

    &.dropdown-triple-column {
        & > * {
            display: grid;
            grid-template-columns: 220px 138px 220px;
            align-items: center;
            -moz-column-gap: 4px;
            grid-column-gap: 4px;
            column-gap: 4px;
        }
    }

    // Load Broker
    &.load-broker {
        .load-broker {
            display: grid;
            align-items: center;
            grid-template-columns: 277px 82px 69px;

            span {
                &:nth-child(2),
                &:nth-child(3) {
                    color: $default-label !important;
                    opacity: 0;
                    top: -19px;
                    font-size: 11px;
                    font-weight: $input-label-font-weight-600;
                }
            }

            &.multiple-labels-position-on-focus {
                span {
                    &:nth-child(2),
                    &:nth-child(3) {
                        transition-delay: 300ms;
                        color: $valid-placholderText !important;
                        opacity: 1;
                        top: -19px;
                        text-align: right;
                    }
                }
            }
        }

        &.required {
            &::after {
                position: absolute;
                left: 51px;
                right: 0;
                top: -1px;
            }
        }

        &.multiple-labels,
        &.up-label {
            &.required {
                &::after {
                    transition-delay: 100ms;
                    transition-timing-function: ease-in;
                    position: absolute;
                    left: 44px;
                    right: 0;
                    top: -1px;
                }
            }
        }
    }

    // Load Broker Contact & Shipper
    .load-broker-contact,
    .load-shipper-contact {
        display: grid;
        grid-template-columns: 235px 38px;
        align-items: center;
        grid-column-gap: 10px;
        -moz-column-gap: 10px;
        column-gap: 10px;
        transition: 0.3 ease-in-out;

        span {
            &:nth-child(2) {
                color: $default-label !important;
                opacity: 0;
                top: -19px;
                font-size: 11px;
                font-weight: $input-label-font-weight-600;
            }
        }

        &.multiple-labels-position-on-focus {
            span {
                &:nth-child(2) {
                    transition-delay: 300ms;
                    opacity: 1;
                    top: -19px;
                    color: $default-removed-background-text !important;
                }
            }
        }
    }

    &.load-shipper-contact .load-shipper-contact{
        grid-template-columns:  295px 38px;
    }

    //------------------------- Custom class -------------------------
    &.regular {
        font-weight: 400;
    }

    &.datetimeclass.dark {
        color: $datetime-dark-label-default;
    }
}

.hide-loads {
    .load-broker {
        grid-template-columns: 365px 92px;
    }
}