//@import "px-normalize-design/_generic.normalize.scss";
//@import "px-box-sizing-design/_generic.box-sizing.scss";
/**
 * px-alert-label styles
 */
.px-alert-label {
  // Component

  .alertlabel {
    display         : inline-block;
    position        : relative;
    padding         : 5px;
    text-transform  : uppercase;
    text-align      : center;
    font-size       : 0.8rem;
    line-height     : 0.8rem;
    background-color: var(--px-alert-label-background-color--important, red);
    color           : var(--px-alert-label-text-color--important, white);
    border          : 1px solid var(--px-alert-label-border-color, transparent);
  }

  .svg-canvas {
    width : 2.2rem;
    height: 2.2rem;

    #circle,
    #polygon {
      stroke-width: 1px;
      stroke      : var(--px-alert-label-border-color, transparent);
    }
  }

  .badge {
    padding: 0;

    .label {
      display        : flex;
      position       : absolute;
      top            : 0;
      right          : 0;
      bottom         : 0;
      left           : 0;
      width          : 100%;
      align-items    : center;
      justify-content: center;
    }
  }

  .important {
    background-color: var(--px-alert-label-background-color--important, red);
    color           : var(--px-alert-label-text-color--important, white);

    &.badge {
      background: none;
      border    : none;
      fill      : var(--px-alert-label-background-color--important, red);

      .label {
        top: calculateRem(8px);
      }
    }
  }

  .warning {
    background-color: var(--px-alert-label-background-color--warning, orange);
    color           : var(--px-alert-label-text-color--warning, white);

    &.badge {
      background: none;
      border    : none;
      fill      : var(--px-alert-label-background-color--warning, orange);
    }
  }

  .error {
    background-color: var(--px-alert-label-background-color--error, yellow);
    color           : var(--px-alert-label-text-color--error, black);

    &.badge {
      background: none;
      border    : none;
      fill      : var(--px-alert-label-background-color--error, yellow);
    }
  }

  .info,
  .information {
    background-color: var(--px-alert-label-background-color--information, blue);
    color           : var(--px-alert-label-text-color--information, white);

    &.badge {
      background: none;
      border    : none;
      fill      : var(--px-alert-label-background-color--information, blue);

      .label {
        top: calculateRem(2px);
      }
    }
  }

  .healthy {
    background-color: var(--px-alert-label-background-color--healthy, green);
    color           : var(--px-alert-label-text-color--healthy, white);

    &.badge {
      background: none;
      border    : none;
      fill      : var(--px-alert-label-background-color--healthy, green);
    }
  }

  .unknown {
    background-color: var(--px-alert-label-background-color--unknown, gray);
    color           : var(--px-alert-label-text-color--unknown, white);

    &.badge {
      background: none;
      border    : none;
      fill      : var(--px-alert-label-background-color--unknown, gray);

      .label {
        top: calculateRem(-1px);
      }
    }
  }
}