@use "design";

.callout {
  padding: design.$space-100;
  border-radius: design.$border-radius-small;

  &.success {
    color: design.$color-on-success-surface;
    background-color: design.$color-success-surface;
  }
  &.info {
    color: design.$purple-05;
    background-color: design.$purple-90;
  }
  &.danger {
    color: design.$color-on-error-surface;
    background-color: design.$color-error-surface;
  }
}

.badge {
  display: inline-flex;
  align-items: center;
  gap: 4px;

  vertical-align: middle;

  font-size: 85%;
  line-height: 1.2;
  letter-spacing: -0.009em;
  text-align: center;

  border-width: 1px;
  border-style: solid;
  border-color: transparent;

  &:not(.isPill) {
    padding-top: 0.15em;
    padding-left: 0.45em;
    padding-bottom: 0.15em;
    padding-right: 0.45em;

    border-radius: 4px;

    &.extraHSpace {
      padding-left: 0.5em;
      padding-right: 0.5em;
    }
  }

  &.vShift {
    position: relative;
    top: -2px;
  }

  &.isPill {
    padding-top: 0.2em;
    padding-left: 0.5em;
    padding-bottom: 0.2em;
    padding-right: 0.5em;

    border-radius: 1000px;

    &.extraHSpace {
      padding-left: 1em;
      padding-right: 1em;
    }
  }

  svg {
    // Scale icon with font size
    height: 1.05em;
    width: 1.05em;
    flex-shrink: 0;
  }
}

.badge {
  &.success {
    &.isGhost {
      color: design.$color-success;
      border-color: design.$color-success;
    }

    &:not(.isGhost) {
      color: design.$green-99;
      background-color: design.$color-success;
    }
  }

  &.red {
    &.isGhost {
      color: design.$color-error;
      border-color: design.$color-error;
    }

    &:not(.isGhost) {
      color: design.$color-on-error-surface;
      background: design.$color-error-surface;
    }
  }

  &.brandPrimary {
    &.isGhost {
      color: design.$color-brand-primary;
      border-color: design.$color-brand-primary;
    }

    &:not(.isGhost) {
      color: design.$purple-99;
      background: design.$color-brand-primary;
    }
  }

  &.brandPrimaryLight {
    &.isGhost {
      color: design.$color-brand-primary;
      border-color: design.$purple-90;
    }

    &:not(.isGhost) {
      color: design.$color-brand-primary;
      background: design.$purple-90;
    }
  }

  &.brandSecondaryLight {
    &.isGhost {
      color: design.$color-brand-secondary;
      border-color: design.$neutral-90;
    }

    &:not(.isGhost) {
      color: design.$green-10;
      background: design.$green-95;
    }
  }

  &.warning {
    &.isGhost {
      color: design.$color-caution;
      border-color: design.$color-caution;
    }

    &:not(.isGhost) {
      color: design.$color-on-caution-surface;
      background: design.$color-caution-surface;
    }
  }

  &.baseColor {
    &.isGhost {
      border-color: design.$neutral-90;
    }

    &:not(.isGhost) {
      color: design.$neutral-10;
      background: design.$neutral-90;
    }
  }

  &.currentColor {
    &.isGhost {
      border-color: currentColor;
    }

    &:not(.isGhost) {
      color: currentColor;
      background: transparent;
    }
  }
}