@import "../../../assets/css/abstracts/custom-variables.scss";

// who is out component

.who-out {

    // Styling for holiday list items
    .nav-link-group-mode {
        font-size: 0.9rem;
        padding-top: .2rem;
        padding-bottom: .2rem;
    }

    // Styling of type dot
    .type-dot {
        padding: 5px;
        border-radius: 350px;
        line-height: 0;
        display: inline-block;
        vertical-align: middle;
        margin-right: 2px;
    }

    // Styling of type dot in group day type mode.
    .group-day-type-header .type-dot  {
        padding: 6px;
        margin-left: 5px;
        margin-right: 0;
    }

    .holiday-type-text + .half-day-text {
        border-left: 1px solid $gray-400;
        padding-left: 5px;
        margin-left: 3px;
    }

}



.who-out .holiday-next-day {
    position: relative;
    margin-top: 0.75rem;
    padding-top: 1rem;

    &::after {
        content: '';
        position: absolute;
        top: 0;
        left: 0;
        right: 0;
        height: 1px;
        background: $gray-300;
        margin: 0 $nav-link-padding-x;
    }
}



// -------------------------
// --- STYLED LABELS - WHOS OUT -----
// -------------------------
.tile-whos-out-component .popover {

    .form-check.radio {
        display: inline-block;
        padding-left: 0;
        margin: 0;

        .form-check-label-inner {
            border-radius: 4px;
            position: relative;
            cursor: pointer;
            border: 1px solid $gray-300;
            display: block;
            margin: 1px;
            padding: 11px;

            &:hover {
                background-color: $gray-100;
                border-color: $gray-400;
            }
        }
    }


    .form-check.radio .form-check-input {
        display: none;
    }

        .form-check:nth-child(1) .form-check-label-inner {
            font-size: 11px;
            padding: 11px 16px;
            &::before {
                content: "";
                padding: 2px 5px;
                border-radius: 10rem;
                display: block;
                background-color: rgba(255,15,15,.21);
                position: absolute;
                left: 10px;
                right: 10px;
                top: 9px;
                bottom: 9px;
            }
        }

        .form-check:nth-child(2) {
            margin-left: 0.5rem;
            .form-check-label-inner {
            font-size: 12px;
            &::before {
                content: "";
                border-radius: 350px;
                display: inline-block;
                margin-right: 2px;
                background-color: rgba(255,15,15,.21);
                height: 10px;
                width: 10px;
            }
        }
    }



    .form-check-input:checked + .form-check-label {
        .form-check-label-inner {
            border: 2px solid $blue-500;
            background: $blue-100;
            margin: 0;
        }
    }


}
