.site-component-badge-link,
.site-component-status__link {
  text-decoration: none;

  &:hover {
    text-decoration: none;
  }
}

// Shared badge styling mixin
@mixin badge-base {
  font-size: 0.9375rem;
  padding: 0.0625rem 0.4375rem;
  border-radius: 2px;
  text-transform: uppercase;
  display: inline-block;
  line-height: 1.2 !important;
}

// Shared badge color mixin
@mixin badge-colors($bg-color, $text-color: $color-white) {
  background-color: $bg-color !important;
  color: $text-color !important;
}

.va-sidebarnav .usa-sidenav-list > li,
main {
  .site-sidenav-status {
    padding-right: 0.3125rem;
  }

  .site-component-status-heading {
    .site-component-status {
      font-size: 1.25rem;
    }

    va-icon {
      position: relative;
      top: 4px;
    }
  }

  // Status badge groups with shared colors
  .site-component-status--use,
  .site-component-status--use-best-practice,
  .site-component-status--use-deployed {
    @include badge-colors(var(--vads-button-color-background-primary-alt-active-on-light));
  }

  .site-component-status--use-with-caution,
  .site-component-status--use-with-caution-available,
  .site-component-status--use-with-caution-candidate {
    @include badge-colors(var(--vads-color-orange), var(--vads-color-base));
  }

  .site-component-status--dont-use,
  .site-component-status--dont-use-proposed,
  .site-component-status--dont-use-deprecated {
    @include badge-colors(var(--vads-color-secondary-darkest));
  }

  // Icon colors matching their respective status colors
  va-icon {
    &[icon="check_circle"] {
      &.site-sidenav-status--use,
      &.site-sidenav-status--use-best-practice,
      &.site-sidenav-status--use-deployed {
        color: var(--vads-button-color-background-primary-alt-active-on-light);
      }
    }

    &[icon="warning"] {
      &.site-sidenav-status--use-with-caution,
      &.site-sidenav-status--use-with-caution-available,
      &.site-sidenav-status--use-with-caution-candidate {
        color: var(--vads-color-orange);
      }
    }

    &[icon="error"] {
      &.site-sidenav-status--dont-use,
      &.site-sidenav-status--dont-use-proposed,
      &.site-sidenav-status--dont-use-deprecated {
        color: var(--vads-color-secondary-darkest);
      }
    }
  }

  .site-sidenav-status--large {
    font-size: inherit;
  }
}

// Badge components using shared mixin
.site-component-badge-link {
  @include badge-base;
  
  &__img {
    padding-right: units(0.5);
  }

  &--uswds {
    @include badge-colors(var(--vads-color-primary-alt-darkest));
    
    // Override line-height from badge-base mixin for links
    line-height: 1.2 !important;

    &:hover,
    &:visited {
      color: var(--vads-color-white) !important;
    }

    &:hover {
      background-color: var(--vads-color-primary-alt) !important;
    }
  }
}

// USA Label badge styles
.usa-label {
  @include badge-base;
  
  // Reset any default USWDS margins to ensure consistent spacing
  margin: 0 !important;

  &.component-label {
    @include badge-colors(#71767a);
  }

  // Icon alignment for all labels
  va-icon {
    vertical-align: middle !important;
    margin-right: units(0.25) !important;
    position: relative !important;
    top: -1px !important;
  }
}