@import "../mixins";
@import "../colors";
@import "../variables";

.SubNavigation-wrapper {
    @include main-wrapper;
}

.SubNavigation-list {
    border-bottom: $border_control_default;
    display: flex;
    justify-content: flex-start;
}

.SubNavigation-item {
    display: inline-block;
    white-space: nowrap;
}

.SubNavigation-link {
    color: $color_text_label;
    cursor: pointer;
    display: inline-block;
    font-size: $font_size_heading_m;
    font-weight: $weight_bold;
    line-height: $line_height_control;
    padding: 18px $submenu_element_horizontal_padding 12px;
    position: relative;
    text-decoration: none;
    transition: $default_transition_on;

    &::after {
        background: $color_text_label_auxilliary;
        bottom: -$border_size_default;
        content: none;
        height: $border_size_marker;
        left: 0;
        position: absolute;
        transition: all .2s ease;
        width: 100%;
    }

    &:visited,
    &:hover,
    &:focus {
        text-decoration: none;
    }

    &:visited {
        color: $color_text_label;
    }

    &:hover,
    &:focus {
        color: $color_text_label_auxilliary;
        transition: $default_transition_off;
    }

    .SubNavigation-item-active & {
        color: $color_text_label_auxilliary;
    }

    .SubNavigation-item-active &::after {
        content: "";
    }

    .SubNavigation-item:first-child & {
        padding-left: $menu_element_horizontal_padding;
    }

    @media all and (max-width: $media_breakpoint_l) {
        font-size: $font_size_heading_s;
        padding-left: $offset_main;
        padding-right: $offset_main;
    }

    @media all and (max-width: $media_breakpoint_m) {
        .SubNavigation-item:first-child & {
            padding-left: $menu_element_horizontal_padding_m;
        }
    }
}