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

// iOS Tabs
// --------------------------------------------------

.tabbar-ios {
  justify-content: center;

  height: $tabbar-ios-height;

  border-top: $tabbar-ios-border;
  background-color: $tabbar-ios-background-color;

  contain: strict;
}

.tabbar-ios.placement-top {
  border-top: 0;
  border-bottom: $tabbar-ios-border;
}

.tabbar-ios .tabbar-highlight {
  background: $tabbar-ios-text-color-active;
}

// iOS Translucent Tabbar
// --------------------------------------------------

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

  -webkit-backdrop-filter: $tabbar-ios-translucent-filter;
  backdrop-filter: $tabbar-ios-translucent-filter;
}

// iOS Tabbar Color Mixin
// --------------------------------------------------

@mixin tabbar-ios($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, shade, ios);

  $translucent-background-color: ion-color-alpha($colors-ios, $color-name, $alpha-ios-high, ios);

  .tabbar-ios-#{$color-name} {
    border-color: $background-ios-color-step-400;
    color: $color-contrast;
    background-color: $color-base;

    fill: $color-contrast;
  }

  .tabbar-ios-#{$color-name} .tab-button {
    color: $color-contrast;
  }

  .tabbar-ios-#{$color-name} .tab-button.focused {
    background: $color-shade;
  }

  .tabbar-ios-#{$color-name} .tab-button:hover:not(.disable-hover),
  .tabbar-ios-#{$color-name} .tab-selected {
    font-weight: bold;

    color: $color-contrast;

    fill: $color-contrast;
  }

  .tabbar-translucent-ios-#{$color-name} {
    background-color: $translucent-background-color;
  }
}

// iOS Tabbar Color Generation
// --------------------------------------------------

@each $color-name, $color-value in $colors-ios {
  @include tabbar-ios($color-name);
}
