/* Diese Datei verwendet itemSurface.css, um den in dieser
Datei beschriebenen Inhalt frei auf der durch die itemSurface
Klasse bereitgestellten Oberfläche platzieren zu können. */

:root
{
    /* Verantwortlich für den Abstand zwischen NavigationBox
    und der gepunkteten Linie um diese */
    --padding-section-element: 0.8rem;
}

/* Sorgt dafür, dass die NavigationBox immer genau mittig in
ihrem Abschnitt auf dem Bildschirm platziert wird */
.autoCenter
{
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
}

.navigationBox
{
    margin-top: 7.5vh;

    border: 1px dotted var(--schwarz);

    font-weight: 600;

    /* Navigation Box ist genauso breit, wie die maximale Breite seines Inhalts.
    Alternative wäre: 80%. Dann ist das NavigationBox so breit, wie 80% der breite
    des Parent Elements. Hier der Wrapper */
    /*width: fit-content;*/
    /*min-width: 70%;*/
    min-width: 25ch;
}

.navigationBox .navigationSection
{
    display: flex;
    flex-direction: column;
    gap: 0.3rem;

    text-align: left;

    padding-left: var(--padding-section-element);
    padding-right: var(--padding-section-element);
    /*padding-top: var(--padding-section-element);*/
    padding-top: min(2.5vh, 17px);
    /*padding-top: 2.5vh;*/
}

.navigationBox .navigationSection:first-child
{
    padding-top: var(--padding-section-element)
}

.navigationBox .navigationSection:last-child
{
    padding-bottom: var(--padding-section-element);
}

.navigationBox .navigationSection img
{
    display: flex;
    justify-content: center;
    align-items: center;

    border-top: 1px dotted;
    border-bottom: 1px dotted;

    width: 8vw;

    margin: 0 auto;

    /* parameter: <padding top, bottom> <padding left, right> */
    padding: calc(1rem) var(--padding-section-element);
}

.navigationBox .navigationSection a
{
    color: var(--blau);
    text-decoration: none;

    /*font-size: min(var(--navigation-box), var(--navigation-box-max));*/
    font-size: clamp(var(--text-normal-min), var(--text-normal), var(--text-normal-max));

    display: flex;
    flex-direction: row;
    justify-content: space-between;
}

.navigationBox .navigationSection a:hover
{
    color: var(--grau);
    text-decoration: none;
}

.navigationBox .navigationSection .indent
{
    margin-left: 0.5rem;
}

.navigationBox .navigationSection .observableNavigationItem
{
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: space-between;
}

.navigationBox .navigationSection .observableNavigationItem.active
{
    /*margin-left: 1.2rem;*/

    /*background-color: rgb(192, 192, 192, 0.2);*/
    background-color: var(--blau-gradient);
    color: var(--weiß);

    padding: 4px 8px;

    border-radius: 10px;
}

/* Wie soll gestylt werden, wenn eine zu einem Link zugehörige Section auf dem Viewport
sichtbar wird: */
.navigationBox .navigationSection .observableNavigationItem.active::after
{
    /*content: "●";*/
}