/*
 * Copyright (C) 2021 The Gravitee team (http://gravitee.io)
 * 
 * Licensed under the Apache License, Version 2.0 (the "License");
 * you may not use this file except in compliance with the License.
 * You may obtain a copy of the License at
 * 
 *         http://www.apache.org/licenses/LICENSE-2.0
 * 
 * Unless required by applicable law or agreed to in writing, software
 * distributed under the License is distributed on an "AS IS" BASIS,
 * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
 * See the License for the specific language governing permissions and
 * limitations under the License.
 */
@use 'sass:map';
@use '@angular/material' as mat;

@use '../../scss/gio-mat-palettes.scss' as palettes;
@use '../../scss/gio-mat-theme-variable' as theme;
@use '../../scss/gio-oem-palette-variable' as oem;

/**
 * Gravitee.io version of bootstrap "badge" element
 */
@mixin theme() {
  %gio-badge-base {
    display: inline-flex;
    min-width: 10px;
    align-items: center;
    justify-content: center;
    padding: 4px 8.5px;
    border-radius: 16px;
    margin-right: 4px;
    margin-left: 4px;
    background-color: mat.m2-get-color-from-palette(palettes.$mat-primary-palette, lighter);
    color: mat.m2-get-color-from-palette(palettes.$mat-primary-palette, lighter-contrast);
    font-family: mat.m2-font-family(theme.$mat-typography, caption);
    font-size: mat.m2-font-size(theme.$mat-typography, caption);
    font-weight: mat.m2-font-weight(theme.$mat-typography, caption);
    line-height: 16px;
    text-align: center;
    text-transform: capitalize;
    vertical-align: middle;

    .mat-icon {
      width: inherit;
      min-width: max-content;
      max-width: 16px;
      height: inherit;

      // Set max height & height and width when using SVG icons (i.e. not coming from a web font) otherwise they are just HUGE
      height: 16px;
      max-height: 16px;
      font-size: inherit;
      line-height: inherit;
      vertical-align: middle;

      &.gio-right {
        margin-left: 4px;
      }

      &.gio-left {
        margin-right: 4px;
      }
    }
  }

  .gio-badge {
    @extend %gio-badge-base;
  }

  .gio-badge-primary {
    @extend %gio-badge-base;
  }

  .gio-badge-accent {
    @extend %gio-badge-base;

    background-color: mat.m2-get-color-from-palette(palettes.$mat-accent-palette, lighter);
    color: mat.m2-get-color-from-palette(palettes.$mat-accent-palette, lighter-contrast);
  }

  .gio-badge-neutral {
    @extend %gio-badge-base;

    background-color: mat.m2-get-color-from-palette(palettes.$mat-space-palette, lighter80);
    color: mat.m2-get-color-from-palette(palettes.$mat-space-palette, lighter80-contrast);
  }

  .gio-badge-white {
    @extend %gio-badge-base;

    background-color: mat.m2-get-color-from-palette(palettes.$mat-basic-palette, white);
    color: mat.m2-get-color-from-palette(palettes.$mat-basic-palette, white-contrast);
  }

  .gio-badge-success {
    @extend %gio-badge-base;

    background-color: mat.m2-get-color-from-palette(palettes.$mat-success-palette, lighter);
    color: mat.m2-get-color-from-palette(palettes.$mat-success-palette, lighter-contrast);
  }

  .gio-badge-error {
    @extend %gio-badge-base;

    background-color: mat.m2-get-color-from-palette(palettes.$mat-error-palette, lighter);
    color: mat.m2-get-color-from-palette(palettes.$mat-error-palette, lighter-contrast);
  }

  .gio-badge-warning {
    @extend %gio-badge-base;

    background-color: mat.m2-get-color-from-palette(palettes.$mat-warning-palette, lighter);
    color: mat.m2-get-color-from-palette(palettes.$mat-warning-palette, lighter-contrast);
  }
}

// OEM Theme

.gio-top-bar-menu {
  .gio-badge-accent {
    background-color: oem.$oem-top-bar-notification;
    color: oem.$oem-top-bar-notification-contrast;
  }
}