@use '@angular/material' as mat;

:host {
    position: relative;
}

#navigation {
    height: 70px;
    background: white;
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 0 10px;
}

#sub-panel {
    background: white;
    border-bottom: 1px solid #ccc;
    padding: 0 1em;
    display: flex;
    justify-content: space-between;
    align-items: center;
    height: 40px;

    .breadcrumbs {
        display: flex;

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

            &:not(:last-child)::after {
                display: none;
            }

            span:hover {
                text-decoration: underline;
                cursor: pointer;
            }
        }
    }

    .search-container {
        display: flex;
    }

    .search {
        text-align: center;
    }
}

.search-input {
    @include mat.form-field-density(-5);
}

/* stylelint-disable-next-line no-descending-specificity */
::ng-deep {

    .search-input {
        div {
            border-radius: 20px;
        }
    }
    
    .dark-theme {
        #navigation,
        #sub-panel {
            background: #1b1c1c;
        }

        #sub-panel {
            border-bottom: 1px solid #333;
        }
    }

    div[matformfieldlineripple] {
        display: none;
    }
}

@media (max-width: 800px) {
    .button-label {
        display: none;
    }

    #sub-panel {
        height: auto;
        padding: 10px 1em;

        .search > .search-input {
            width: 160px;
        }
    }

    .breadcrumbs {
        flex-direction: column;
    }

    .label {
        display: none;
    }
}
