@charset "utf-8";
@import (optional, reference) "var.less";
/*Flag Element*/
AX-FLAG {
  --_flag-c-text: #fff;
  --_flag-c-bg: var(--_c-prim);
  font-size: var(--_sz-ignore);
  display: block;
  overflow: hidden;
  position: absolute;
  left: 0;
  top: 0;
  z-index: 3;
  [role=wrap]{
    display: block;
    border-radius: inherit;
    overflow: hidden;
    width: 100%;
    height: 100%;
  }
  [role=label] {
      color: var(--_flag-c-text);
      background-color: var(--_flag-c-bg);
      overflow: hidden;
  }
  &:where(:not([type=circle], [type=horn])) {
      width: 4.2rem;
      aspect-ratio: 1/1;
  }
  &:where(:not([type=circle], [type=horn])) [role=label] {
      width: 6.0rem;
      aspect-ratio: 1/1;
      line-height: 10rem;
      text-align: center;
      rotate: -45deg;
      position: absolute;
      top: -3.0rem;
      left: -3.0rem;
  }
  &[placement=right]:where(:not([type=circle], [type=horn])) {
      left: auto;
      right: 0;
      top: 0;
  }
  &[placement=right]:where(:not([type=circle], [type=horn])) [role=label] {
      top: -3.0rem;
      left: auto;
      right: -3.0rem;
      rotate: 45deg;
  }
  &[type=circle] {
      width: var(--_sz-input);
      aspect-ratio: 1/1;
      border-radius: 100%;
      left: var(--_m);
      top: var(--_m);
      i {
          width: 100%;
          aspect-ratio: 1/1;
          border-radius: inherit;
          .v3-flex-center(flex);
      }
      &[placement=right] {
          left: auto;
          right: var(--_m);
      }
  }
  &[type=horn] {
      width: calc(var(--_sz-header) + 1rem);
      height: var(--_sz-list);
      left: 0;
      top: var(--_m);
      i {
          width: calc(100% - 1.2rem);
          height: 100%;
          .v3-flex-center(flex);
      }
      &:before,
      &:after {
          content: '';
          width: 0;
          height: 0;
          border-width: .6rem;
          border-style: solid;
          position: absolute;
          right: 0;
      }
      &:before {
          border-color: var(--_flag-c-bg) transparent transparent var(--_flag-c-bg);
          top: 0;
      }
      &:after {
          border-color: transparent transparent var(--_flag-c-bg) var(--_flag-c-bg);
          bottom: 0;
      }
      &[placement=right] {
          left: auto;
          right: 0;
          i {
              margin-left: 1.2rem;
          }
          &:before,
          &:after {
              right: auto;
              left: 0;
          }
          &:before {
              border-color: var(--_flag-c-bg) var(--_flag-c-bg) transparent transparent;
          }
          &:after {
              border-color: transparent var(--_flag-c-bg) var(--_flag-c-bg) transparent;
          }
      }
  }
  &[theme=prim] {
      --_flag-c-bg: var(--_c-prim);
  }
  &[theme=succ]{
      --_flag-c-bg: var(--_c-succ);
  }
  &[theme=error] {
      --_flag-c-bg: var(--_c-error);
  }
  &[theme=warn] {
      --_flag-c-text: var(--_c-text);
      --_flag-c-bg: var(--_c-warn);
  }
  &[theme=info] {
      --_flag-c-bg: var(--_c-info);
  }
  &[theme=issue] {
      --_flag-c-bg: var(--_c-issue);
  }
  &[theme=text] {
      --_flag-c-bg: var(--_c-text);
  }
  &[theme=ignore] {
      --_flag-c-text: var(--_c-ignore);
      --_flag-c-bg: var(--_c-text-bg);
  }
}
