@import "./toolbar";
@import "./toolbar.ios.vars";

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

.toolbar-ios {
  @include padding($toolbar-ios-padding);

  min-height: $toolbar-ios-height;

  font-family: $toolbar-ios-font-family;

  @media screen and (orientation: landscape) {
    @include safe-area-padding-horizontal($toolbar-ios-padding);
  }
}

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


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

.toolbar-background-ios {
  background: $toolbar-ios-background-color;
}


// iOS Header / Footer Borders
// --------------------------------------------------

.header-ios .toolbar-background-ios,
.footer-ios .toolbar-background-ios {
  border-style: solid;
  border-color: $toolbar-ios-border-color;
}

.header-ios .toolbar-ios:last-child .toolbar-background-ios {
  border-width: 0 0 $hairlines-width;
}

.footer-ios .toolbar-ios:first-child .toolbar-background-ios {
  border-width: $hairlines-width 0 0;
}

.header-ios[no-border] .toolbar-ios:last-child .toolbar-background-ios {
  border-bottom-width: 0;
}

.footer-ios[no-border] .toolbar-ios:first-child .toolbar-background-ios {
  border-top-width: 0;
}


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

.header-translucent-ios .toolbar-background-ios,
.footer-translucent-ios .toolbar-background-ios,
.toolbar-translucent-ios .toolbar-background-ios {
  // TODO: @color-mod in the future we will want to replace this with the following color-mod
  // background-color: color-mod($toolbar-ios-background-color, a($alpha-ios-highest));
  background: $toolbar-ios-translucent-background-color;
}

.toolbar-translucent-ios .toolbar-background-ios {
  -webkit-backdrop-filter: $toolbar-ios-translucent-filter;
  backdrop-filter: $toolbar-ios-translucent-filter;
}


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

.toolbar-content-ios {
  flex: 1;
  order: map-get($toolbar-order-ios, content);

  min-width: 0;
}

@mixin ios-toolbar-theme($color-name) {
  $color-base: ion-color($colors-ios, $color-name, base, ios);
  $color-contrast: ion-color($colors-ios, $color-name, contrast, ios);
  $color-translucent: ion-color-alpha($colors-ios, $color-name, $alpha-ios-highest, ios);

  .toolbar-ios-#{$color-name} {

    .toolbar-background-ios {
      background: $color-base;
    }

    .bar-button-clear-ios,
    .back-button-ios .back-button-inner,
    .bar-button-default-ios {
      color: $color-contrast;
    }

    @each $color-name, $color-value in $colors-ios {
      @include ios-bar-button-default($color-name);
      @include ios-bar-button-outline($color-name);
      @include ios-bar-button-solid($color-name);
    }
  }

  // Colored toolbars with translucency
  .header-translucent-ios .toolbar-ios-#{$color-name},
  .footer-translucent-ios .toolbar-ios-#{$color-name},
  .toolbar-translucent-ios-#{$color-name} {

    .toolbar-background-ios {
      background: $color-translucent;
    }
  }
}


// iOS Toolbar Button Placement
// --------------------------------------------------

.bar-buttons-ios {
  order: map-get($toolbar-order-ios, buttons-mode-start);

  transform: translateZ(0);
}

.bar-buttons-ios[slot="start"] {
  order: map-get($toolbar-order-ios, buttons-start);
}

.bar-buttons-ios[slot="mode-end"] {
  @include text-align(end);

  order: map-get($toolbar-order-ios, buttons-mode-end);
}

.bar-buttons-ios[slot="end"] {
  @include text-align(right);

  order: map-get($toolbar-order-ios, buttons-end);
}


// iOS Toolbar Button Default
// --------------------------------------------------

.bar-button-ios {
  @include padding(0, 4px);
  @include border-radius($toolbar-ios-button-border-radius);

  height: 32px;

  border: 0;
  font-size: $toolbar-ios-button-font-size;
}

@mixin ios-bar-button-default($color-name, $color-base: null) {
  @if ($color-base == null) {
    $color-base: ion-color($colors-ios, $color-name, base, ios);
  }

  .bar-button-#{$color-name}-ios,
  .bar-button-clear-ios-#{$color-name},
  .bar-button-ios-#{$color-name} {
    color: $color-base;
    background-color: transparent;

    &.activated {
      opacity: .4;
    }
  }

  .enable-hover .bar-button-#{$color-name}-ios:hover,
  .enable-hover .bar-button-clear-ios-#{$color-name}:hover,
  .enable-hover .bar-button-ios-#{$color-name}:hover {
    color: $color-base;
  }

}

// iOS Toolbar Button Icon
// --------------------------------------------------

.bar-button-ios .icon {
  fill: $toolbar-ios-button-icon-fill-color;
}


// iOS Toolbar Button Outline
// --------------------------------------------------

.bar-button-outline-ios {
  border-width: 1px;
  border-style: solid;
  border-color: $toolbar-ios-button-color;
  color: $toolbar-ios-button-color;
  background-color: transparent;

  &.activated {
    color: $toolbar-ios-background-color;
    background-color: $toolbar-ios-button-color;
  }
}

.enable-hover .bar-button-outline-ios:hover {
  opacity: .4;
}

@mixin ios-bar-button-outline($color-name) {
  $color-base: ion-color($colors-ios, $color-name, base, ios);
  $color-contrast: ion-color($colors-ios, $color-name, contrast, ios);

  .bar-button-outline-ios-#{$color-name} {
    border-color: $color-base;
    color: $color-base;
    background-color: transparent;

    &.activated {
      color: $color-contrast;
      background-color: $color-base;
    }
  }
}


// iOS Toolbar Button Solid
// --------------------------------------------------

.bar-button-solid-ios {
  color: $toolbar-ios-button-background-color;
  background-color: $toolbar-ios-button-color;

  &:hover:not(.disable-hover) {
    color: $toolbar-ios-button-background-color;
    opacity: .4;
  }

  &.activated {
    color: $toolbar-ios-button-background-color;
    background-color: $toolbar-ios-button-background-color-activated;
    opacity: .4;
  }
}

.enable-hover .bar-button-solid-ios:hover {
  opacity: .4;
}

@mixin ios-bar-button-solid($color-name) {
  $color-base: ion-color($colors-ios, $color-name, base, ios);
  $color-contrast: ion-color($colors-ios, $color-name, contrast, ios);
  $color-shade: ion-color($colors-ios, $color-name, tint, ios);

  .bar-button-solid-ios-#{$color-name} {
    color: $color-contrast;
    background-color: $color-base;

    &.activated {
      color: $color-contrast;
      background-color: $color-shade;
    }
  }
}


// iOS Toolbar Button Icon
// --------------------------------------------------

.bar-button-ios ion-icon[slot="start"] {
  @include padding-horizontal(null, .3em);

  font-size: 1.4em;
  line-height: .67;

  pointer-events: none;
}

.bar-button-ios ion-icon[slot="end"] {
  @include padding-horizontal(.4em, null);

  font-size: 1.4em;
  line-height: .67;

  pointer-events: none;
}

.bar-button-ios ion-icon[slot="icon-only"] {
  @include padding(0);

  font-size: 1.8em;
  line-height: .67;

  pointer-events: none;
}


// iOS Toolbar Menu Toggle
// --------------------------------------------------

.bar-button-menutoggle-ios {
  @include margin(0, 6px);
  @include padding(0);

  order: map-get($toolbar-order-ios, menu-toggle-start);

  min-width: 36px;

  ion-icon {
    @include padding(0, 6px);

    font-size: 28px;
  }
}

.bar-button-menutoggle-ios[slot="mode-end"],
.bar-button-menutoggle-ios[slot="end"] {
  order: map-get($toolbar-order-ios, menu-toggle-end);
}


// iOS Toolbar Color Generation
// --------------------------------------------------

@include ios-bar-button-default(default, $toolbar-ios-button-color);
@include ios-bar-button-default(clear, $toolbar-ios-button-color);

@each $color-name, $color-value in $colors-ios {
  @include ios-toolbar-theme($color-name);
  @include ios-bar-button-default($color-name);
  @include ios-bar-button-outline($color-name);
  @include ios-bar-button-solid($color-name);
}


// iOS strong Button
// --------------------------------------------------

.bar-button-strong-ios {
  font-weight: $toolbar-ios-button-strong-font-weight;
}
