.topbar {
  background: $topbar-bg;
  display: flex;
  justify-content: space-between;
  align-items: center;
  @include tablet {
    left: $width-sidebar-tablet;
  }
  @include desktop {
    left: $width-sidebar-desktop;
  }
  @include tablet-desktop {
    z-index: 90;
    height: $topbar-height;
    position: fixed;
    top: 0;
    right: 0;
    padding-left: 50px;
    padding-right: 50px;
  }
}

.topbar__buttons {
  display: flex;
  align-items: center;
}

.toggle-mode {
  cursor: pointer;
  display: inline-block;
  width: 55px;
  height: 26px;
  background-color: rgba(#fff, .7);
  border-radius: 13px;
  padding: 0;
  transition: background-color 200ms cubic-bezier(0.445, 0.05, 0.55, 0.95);
  position: relative;
  margin: 10px 50px;
  &:before,
  &:after {
    color: #fff;
    position: absolute;
    font-size: 18px;
    font-family: 'icomoon';
  }

  &:before {
    content: $icon-pencil;
    left: -30px;
    top: -3px;
  }

  &:after {
    content: $icon-eye;
    top: -5px;
    right: -32px;
    font-size: 21px;
  }
  span {
    display: inline-block;
    position: relative;
    z-index: 1;
    top: 3px;
    width: 20px;
    height: 20px;
    background-color:darken($topbar-bg, 20%);
    border-radius: 50%;
    transition: all 400ms cubic-bezier(0.68, -0.55, 0.265, 1.55);
  }
}

.toggle-mode--edit span {
  left: 2px;
}

.toggle-mode--view span {
  left: 33px;
}

.authentication-menu {
  @include desktop {
    margin-left: 20px;
    margin-right: -50px;
    height: $topbar-height;
  }
}

.authentication-menu__popup {
  background: #fff;
  padding: 20px;
  box-shadow: 0 2px 5px 0 rgba(#000000, .09);
  a {
    display: block;
    border: none;
  }
  input {
    margin-bottom: 20px;
  }
  &:after {
    content: '';
    height: 0;
    width: 0;
    border-width: 0 10px 10px 10px;
    border-style: solid;
    border-color: transparent transparent #fff transparent;
    position: absolute;
    top: -10px;
    right: ($topbar-height/2) - 10px;
  }
  @include tablet-desktop {
    position: fixed;
    top: 100px;
    right: 0;
    width: 500px;
    max-width: 100%;
  }
}

.authentication-menu__user-btn {
  background: #464E54;
  color: #fff;
  border: none;
  height: 100%;
  min-height: 70px;
  width: 70px;
  display: inline-block;
  position: relative;
  &:before {
    content: '\e900';
    font-family: 'icomoon';
    font-size: 25px;
    position: absolute;
    left: 50%;
    top: 50%;
    margin-top: -12px;
    margin-left: -12px;
    line-height: 1;
  }
  &:hover {
    background: #fff;
    color: #464E54;
  }
  @include desktop {
    width: $topbar-height;
    height: $topbar-height;
  }
}

.authentication-menu__forgot-password {
  margin-top: 10px;
}

.topbar__action-wrapper {
  display: flex;
  align-items: center;
}

.language-selector {
  display: inline-block;
  position: relative;
}


.language-selector__change-language {
  background: transparent;
  color: #fff;
  border: 1px solid rgba(255, 255, 255, 0.5);
  position: relative;
  &:after {
    content: '';
    width: 0;
    height: 0;
    border-style: solid;
    border-width: 8px 5px 0 5px;
    border-color: #fff transparent transparent transparent;
    display: inline-block;
    margin-left: 10px;
  }
  &:focus,
  &:hover {
    color: #fff;
    border-color: currentColor;
  }
}

.language-selector__languages {
  background: #fff;
  position: absolute;
  width: 100%;
  button {
    width: 100%;
    border: none;
    text-align: left;
  }
}