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

$item_top_bottom_offset: 17px;

.MainNavigation {
    background: $gorilla;
    display: block;
}

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

.MainNavigation-item {
    display: inline-block;
}

.MainNavigation-link {
    @include transition;

    cursor: pointer;
    display: inline-block;
    line-height: $line_height_control;
    padding: $item_top_bottom_offset $menu_element_horizontal_padding;

    &,
    &:visited,
    &:hover,
    &:focus {
        color: $color_text_invert;
    }

    .MainNavigation-item-active &,
    &:hover,
    &:focus {
        background: $gorilla_auxiliary;
        text-decoration: none;
    }

    .MainNavigation-item-active & {
        cursor: default;
    }

    .MainNavigation-item-active &:hover,
    .MainNavigation-item-active &:focus {
        text-decoration: none;
    }

    @media all and (max-width: $media_breakpoint_m) {
        padding-left: $menu_element_horizontal_padding_m;
        padding-right: $menu_element_horizontal_padding_m;
    }
}