$boder-color: 1px solid rgba(150, 150, 150, 0.4);

.habitation {
    border: $boder-color;
    border-radius: 5px;
    @include flex(false, false, unset, center);
    width: 100%;
    font-size: 13px;

    &__header {
        @include flex(true, false, center, center);
        background: $background;
        min-width: max-content;
        height: 100%;

        padding: 15px;
        border-radius: 5px 0 0 5px;
        .habitation-number {
            font-size: 18px;
            color: $primary-brand;
        }
    }

    &--justheader {
        @extend .habitation__header;
        height: 110px;
        width: 150px;
        border-radius: 8px;

        @include breakpoint(md) {
            height: 90px;
            width: 135px;
        }

        @include breakpoint(xs) {
            height: 75px;
            width: 90px;
        }
    }

    &--reservation {
        th,
        td {
            vertical-align: middle;
            &:first-child {
                width: 15%;
            }
            &:nth-child(2) {
                width: 30%;
            }
            &:nth-child(3) {
                width: 20%;
            }
            &:nth-child(4) {
                width: 35%;
                text-align: center;
            }
        }
        th {
            padding: 10px 0;
        }
        td {
            padding: 5px 0;
        }
    }

    &--change {
        @extend .habitation--reservation;

        @include breakpoint(s) {
            flex-direction: column;
        }
    }

    &__body {
        width: 100%;
        border-left: $boder-color;
        height: 100%;
        border-radius: 0 5px 5px 0;
        &--gestion {
            & .options {
                border-radius: inherit;
                background-color: $secondary-brand;
                display: flex;
                justify-content: flex-end;
                align-items: center;
                padding: 6px;
                border-bottom: solid 1px $dark-gray;
                gap: 5px;
                > div {
                    display: flex;
                    gap: 5px;
                    .control {
                        width: 170px;
                        @include breakpoint(s) {
                            width: 130px;
                        }
                    }
                }
                &.space-between {
                    > button {
                        &:nth-child(3) {
                            display: none;
                        }
                        @include breakpoint(s) {
                            &:nth-child(3) {
                                display: initial;
                                img {
                                    width: 20px;
                                    height: 20px;
                                }
                            }
                            &:nth-child(2) {
                                display: none;
                            }
                        }
                    }
                }
            }
            & .sections {
                display: flex;
            }
            & .left-section {
                width: 50%;
                padding: 10px;
                span {
                    color: $primary-brand;
                }
                border-right: solid 1px $dark-gray;
            }
            & .right-section {
                width: 50%;
                padding: 10px;
                gap: 10px !important;
            }
        }
        span.tooltip {
            left: 25px;
            top: 1px;
        }
        thead {
            background-color: $secondary-brand;
            th {
                font-weight: normal;
            }
            span {
                color: $primary-brand;
            }
        }
        tr{
            height: 35px;
            &:last-child {
                th:last-child {
                    border-top-right-radius: 5px;
                }
                td:last-child {
                    border-bottom-right-radius: 5px;
                }
            }
        }
        .gray,
        .disabled {
            color: $dark-gray;
            background-color: $background;
        }

        label.b-checkbox {
            margin-right: 0 !important;
        }

        %common-selected {
            color: white;
            i {
                color: inherit;
            }
        }

        .red {
            background-color: $warning-state !important;
            @extend %common-selected;
        }

        .selected {
            background-color: $success-state;
            @extend %common-selected;
        }

        .asigned {
            background-color: #56ccf2 !important;
            @extend %common-selected;
        }
    }
}

.habitation-block {
    grid-column: 1/5;
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 30px 40px;
    margin-top: 15px;
    @include breakpoint(lg) {
        grid-template-columns: repeat(auto-fit, minmax(450px, 1fr));
    }
}

.habitation-container {
    height: calc(100% - 65px);
    @extend .calendar;
    padding: 30px !important;
    border: none !important;
    &__navbar {
        @extend .calendar__navbar;
        margin-top: 20px;
    }
    &__body {
        padding: 30px;
        height: 350px;
        overflow-y: overlay;
    }
}

.resident-change {
    width: 45%;
    min-width: 500px;
    margin: 15px auto;
    &-block {
        display: flex;
        width: 100%;
        margin: 25px 0;
        justify-content: space-between;
        flex-wrap: wrap;
        @include breakpoint(md) {
            flex-direction: column;
        }
    }
    &--resume {
        display: flex;
        align-items: center;
        justify-content: space-between;
        gap: 5px;
        img {
            height: 35px;
            width: auto;
            @include breakpoint(md) {
                height: 30px;
            }
            @include breakpoint(s) {
                height: 20px;
            }
        }
    }
    &__text {
        position: relative;
        height: 35px;
        margin: 20px 0 25px;
        display: flex;
        align-items: center;
        justify-content: space-between;
        &__absolute {
            position: absolute;
            top: -20px;
            font-size: 14px;
        }
    }

    @include breakpoint(md) {
        width: 85%;
        min-width: 400px;
    }
    @include breakpoint(s) {
        width: 100%;
        min-width: 100%;
    }
    & + hr {
        width: calc(100% - calc(15px * 5));
        margin: 25px auto 0 auto;
        height: 1px;
        background-color: $gray;
    }
}
