@import "../../../themes/ionic.globals";

// Toolbar Buttons
// --------------------------------------------------

.bar-button {
  position: relative;
  display: inline-block;
  line-height: 1;
  text-overflow: ellipsis;
  text-transform: none;
  white-space: nowrap;
  vertical-align: top; // the better option for most scenarios
  vertical-align: -webkit-baseline-middle; // the best for those that support it
  cursor: pointer;
  user-select: none;
  
  @include margin(0);
  @include padding(0);
  @include text-align(center);
  @include appearance(none);
  
  // Badge
  .ion-badge {
    position: absolute;
    top: 0;
    right: -4px;
    padding: 2px 6px;
    font-size: 10px;
  }
}

.bar-button::after {
  
  // used to make the button's hit area larger
  position: absolute;
  content: "";
  
  @include position(-7px, -2px, -6px, -2px);
}

// Menu Toggle
// --------------------------------------------------

.bar-button-menutoggle {
  display: flex;
  align-items: center;
}

// Back Button
// --------------------------------------------------

.back-button {
  //display: none;
  display: inline-block;
}

//.back-button.show-back-button {
//  display: inline-block;
//}

.back-button-text {
  display: flex;
  align-items: center;
}

.icon-arrow-back {
  display: inline-block;
  width: 18px; /* no */
  height: 23px; /* no */
  background-repeat: no-repeat;
  background-position: left center;
  background-size: 16px 23px; /* no */
}

@mixin arrow-back($color) {
  $arrow-back-svg: "<svg t='1499003919115' viewBox='0 0 1024 1024' xmlns='http://www.w3.org/2000/svg' p-id='3978' xmlns:xlink='http://www.w3.org/1999/xlink'><path d='M702.882 958.388l64.032-63.397-380.993-383.606 384.196-380.377-63.49-63.925-448.221 443.779z' p-id='3979' fill='#{$color}'/></svg>";
  
  .icon-arrow-back {
    color: $color;
    
    @include svg-background-image($arrow-back-svg);
  }
}