@import "../../../globals.ios";

// iOS Toolbar
// --------------------------------------------------

$toolbar-order-ios: (
  back-button: 10,
  menu-toggle-primary: 20,
  primary: 30,
  secondary: 50,
  menu-toggle-secondary: 60,
);

$toolbar-ios-height:                        4.4rem !default;
$toolbar-ios-border-color:                  $toolbar-border-color !default;
$toolbar-ios-button-font-size:              1.7rem !default;
$toolbar-ios-title-font-size:               1.7rem !default;


.toolbar {
  min-height: $toolbar-ios-height;

  [menu-toggle] {
    order: map-get($toolbar-order-ios, menu-toggle-primary);
    cursor: pointer;
  }

  [menu-toggle][secondary] {
    order: map-get($toolbar-order-ios, menu-toggle-secondary);
  }

  ion-segment-button[button] {
    line-height: 2.4rem;
    min-height: 2.4rem;
    font-size: 1.2rem;
  }

  button,
  [button] {
    margin-top: 0;
    margin-bottom: 0;
    padding: 0 5px;
    min-height: 32px;
  }

  button.icon-only,
  [button].icon-only {
    padding-right: 0;
    padding-left: 0;
  }

  button icon,
  [button] icon {
    padding: 0;
    min-width: 28px;
  }

  .back-button {
    margin: 0;
    min-height: 3.2rem;
    line-height: 1;
    order: map-get($toolbar-order-ios, 'back-button');
    overflow: visible;
  }

  .back-button-icon {
    display: inherit;
    margin: 0;
    min-width: 18px;
    font-size: 3.2rem;
  }

}

.toolbar toolbar-background {
  border-bottom-width: 1px;
  border-bottom-style: solid;
}

ion-title {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  padding: 0px 90px 1px 90px;
  pointer-events: none;
  transform: translateZ(0px);
}

.toolbar-title {
  font-size: $toolbar-ios-title-font-size;
  font-weight: 500;
  text-align: center;
  pointer-events: auto;
}

ion-nav-items {
  flex: 1;
  order: map-get($toolbar-order-ios, primary);
  transform: translateZ(0px);
}

ion-nav-items[secondary] {
  text-align: right;
  order: map-get($toolbar-order-ios, secondary);
}

&.hairlines .toolbar toolbar-background {
  border-bottom-width: 0.55px;
}


// iOS Navbar
// --------------------------------------------------

$navbar-ios-height:                        4.4rem !default;


ion-navbar-section {
  min-height: $navbar-ios-height;
}

.back-button {
  transform: translateZ(0px);
}