/*!
 * SPDX-License-Identifier: Apache-2.0
 *
 * The OpenSearch Contributors require contributions made to
 * this file be licensed under the Apache-2.0 license or a
 * compatible open source license.
 *
 * Modifications Copyright OpenSearch Contributors. See
 * GitHub history for details.
 */

.ouiToken {
  display: inline-flex;
  align-items: center;
  justify-content: center;

  svg {
    height: 100%;
    margin: auto;
  }
}

.ouiToken--circle {
  border-radius: 50%;
}

.ouiToken--square {
  // These are pretty small elements, the standard size
  // is just slightly too large.
  border-radius: $ouiBorderRadius - 1px;
}

.ouiToken--xsmall {
  width: $ouiSizeM;
  height: $ouiSizeM;

  &.ouiToken--rectangle {
    padding: 0 $ouiSizeXS;
  }
}

.ouiToken--small {
  width: $ouiSize;
  height: $ouiSize;

  &.ouiToken--rectangle {
    padding: 0 $ouiSizeXS;
  }
}

.ouiToken--medium {
  width: $ouiSizeL;
  height: $ouiSizeL;

  &.ouiToken--rectangle {
    padding: 0 $ouiSizeS;
  }
}

.ouiToken--large {
  width: $ouiSizeXL;
  height: $ouiSizeXL;

  &.ouiToken--rectangle {
    padding: 0 ($ouiSize * .5);
  }
}

.ouiToken--rectangle {
  box-sizing: content-box;
}

@each $type in $ouiTokenTypeKeys {
  .ouiToken--#{$type} {
    $color: map-get(map-get($ouiTokenTypes, $type), 'graphic');
    $backgroundColor: tintOrShade($color, 90%, 70%);
    $fillColor: makeHighContrastColor($color, $backgroundColor);

    // Without a background, the fill color should be the graphic color
    color: $color;

    &.ouiToken--light {
      color: $fillColor;
      background-color: $backgroundColor;
      box-shadow: inset 0 0 0 1px tintOrShade($color, 70%, 60%);
    }

    // Dark tokens uses the main color as the background against light or dark text
    $color: map-get(map-get($ouiTokenTypes, $type), 'behindText');

    &.ouiToken--dark {
      background-color: $color;
      color: chooseLightOrDarkText($color, $ouiColorGhost, $ouiColorInk);
    }
  }
}