@import "./default/cross_dependant_styles";
@import "./default/widget_margin";

/// Type of icons to use:
///
/// - `"icon-font"`: Circular buttons with font awesome icons.
///
/// - `"sprite"`: Custom icons from `icon_sprite.png` in theme
///   directory.
$outline-navigation-bar-icons: $widget-icons !default;

/// @see $default-widget-icon-font-options
$outline-navigation-bar-icon-font-options: () !default;

.outline_navigation_bar {
  @import "./default/mixins";
  @import "./default/icons/icon_font";
  @import "./default/icons/sprite";

  $basic-text-color: #fff !default;

  $outline-navigation-bar-basic-background-color: $basic-background-color-transparent !default;
  $outline-navigation-bar-active-chapter-color: $main-color !default;
  $outline-navigation-bar-active-share-icon-color: $outline-navigation-bar-active-chapter-color;

  $outline-navigation-bar-menu-box-background-color: $widget-background-color !default;
  $outline-navigation-bar-menu-box-color: $widget-text-color !default;

  @if $outline-navigation-bar-icons == "sprite" {
    @include outline-navigation-bar-icons-sprite;
  } @else {
    @include outline-navigation-bar-icons-icon-font(
      widget-icon-font-options($outline-navigation-bar-icon-font-options)...
    );
  }

  position: absolute;
  right: 0;
  top: 0;
  z-index: 3;
  height: 100%;

  font-family: $standard-font;
  background-color: $outline-navigation-bar-basic-background-color;
  @include transition(min-width 0.2s ease, width 0.2s ease);
  @include user-select(none);

  &.fixed {
    min-width: 65px;
  }

  &.expandable {
    width: 18px;
  }

  &.buttons_active {
    width: 65px !important;
  }

  @include mobile {
    &.expanded {
      width: 200px !important;
    }
  }

  .has_mobile_platform &.expanded {
    width: 200px !important;
  }

  @import "./default/prevent_focus_rect_on_pointer_down";

  @import "./default/panel";
  @import "./default/parent_page_button";
  @import "./default/mobile_panel";
  @import "./default/mobile_images";
  @import "./default/menu_item";
  @import "./default/menu_items";
  @import "./default/toggle";
  @import "./default/volume_box";
  @import "./default/credits_box";
  @import "./default/mobile_sharing";
  @import "./default/scroller";
}

body.has_no_phone_platform {
  .menu_item.share_whats_app,
  .menu_item.share_telegram {
    display: none !important;
  }
}