@use "../../../Sass/common/_variables";

.menu-bar {
  position: absolute;
  z-index: 108;
  top: variables.$map-button-top;
  left: variables.$work-bench-width;
  right: variables.$padding * 2;

  // todo: find some non-layout-change animation technique for
  // this flex-menu-bar-workbench problem
  transition: margin-left 0.25s;
  // margin-left: variables.$work-bench-width + 40px;
  margin-left: 50px;

  display: flex;
  justify-content: space-between;
  flex-flow: wrap;
}

.menu-bar--workbenchClosed {
  // transition-delay: 0.25s; // temporary disable delays for splitter lag w/o resizing on transitionend
  margin-left: 35px;
}

.menu {
  composes: list-reset from "../../../Sass/common/_base.scss";
  composes: clearfix from "../../../Sass/common/_base.scss";
  composes: sm-show from "../../../Sass/common/_base.scss";

  margin: 0 variables.$padding-small variables.$padding-small
    variables.$padding-small;

  /* Align About button with compass */
  // margin-right: 7px;
}

.menu-item {
  pointer-events: auto;
  position: relative;
  display: block;
  float: left;

  // Prettier in flex-supported-browsers
  display: flex;
  justify-content: center;
  flex-direction: row;
  align-items: center;

  margin-right: variables.$padding-tiny;

  &:last-child {
    margin-right: 0;
  }

  // TODO(?)
  // These selectors are here so that we can support the various implementations of
  // menu item, a prop calculated with javascript would be a better option for later
  &:first-child > div > button,
  &:first-child > div > a,
  &:first-child > button,
  &:first-child > a {
    border-radius: variables.$map-button-border-radius 0 0
      variables.$map-button-border-radius;
  }

  &:last-child > div > button,
  &:last-child > div > a,
  &:last-child > button,
  &:last-child > a {
    border-radius: 0 variables.$map-button-border-radius
      variables.$map-button-border-radius 0;
  }

  &:only-child > div > button,
  &:only-child > div > a,
  &:only-child > button,
  &:only-child > a {
    border-radius: variables.$map-button-border-radius
      variables.$map-button-border-radius variables.$map-button-border-radius
      variables.$map-button-border-radius;
  }
}

.flex {
  composes: flex from "../../../Sass/common/_base.scss";
}

.langBtn {
  composes: btn from "../../../Sass/common/_buttons.scss";
  composes: btn--map from "../../../Sass/common/_buttons.scss";
  text-transform: uppercase;
}