@use './focus';

$ods-tag-height-md: 20px;
$ods-tag-height-lg: 28px;

@mixin ods-tag() {
  box-sizing: border-box;
  display: inline-flex;
  flex-flow: row;
  grid-gap: 0.25rem;
  align-items: center;
  border-width: 2px;
  border-style: solid;
  border-radius: var(--ods-border-radius-lg);
  cursor: pointer;

  &:focus-visible {
    @include focus.ods-focus();
  }
}

@mixin ods-tag-size($size) {
  @if $size == 'md' {
    padding: 1px 8px;
    height: $ods-tag-height-md;
    font-size: 0.875rem;
  } @else if $size == 'lg' {
    padding: 2px 10px;
    height: $ods-tag-height-lg;
    font-size: 1rem;
  }
}

@mixin ods-tag-color($color) {
  @if $color == 'critical' {
    border-color: var(--ods-color-critical-100);
    background-color: var(--ods-color-critical-000);
    color: var(--ods-color-critical-900);

    &:focus-visible,
    &:hover {
      border-color: var(--ods-color-critical-200);
      background-color: var(--ods-color-critical-050);
    }

    &:active {
      border-color: var(--ods-color-critical-300);
      background-color: var(--ods-color-critical-100);
    }
  } @else if $color == 'information' {
    border-color: var(--ods-color-information-100);
    background-color: var(--ods-color-information-000);
    color: var(--ods-color-information-900);

    &:focus-visible,
    &:hover {
      border-color: var(--ods-color-information-200);
      background-color: var(--ods-color-information-100);
    }

    &:active {
      border-color: var(--ods-color-information-300);
      background-color: var(--ods-color-information-200);
    }
  } @else if $color == 'neutral' {
    border-color: var(--ods-color-neutral-100);
    background-color: var(--ods-color-neutral-000);
    color: var(--ods-color-neutral-700);

    &:focus-visible,
    &:hover {
      border-color: var(--ods-color-neutral-200);
      background-color: var(--ods-color-neutral-100);
    }

    &:active {
      border-color: var(--ods-color-neutral-300);
      background-color: var(--ods-color-neutral-200);
    }
  } @else if $color == 'success' {
    border-color: var(--ods-color-success-100);
    background-color: var(--ods-color-success-000);
    color: var(--ods-color-success-900);

    &:focus-visible,
    &:hover {
      border-color: var(--ods-color-success-200);
      background-color: var(--ods-color-success-050);
    }

    &:active {
      border-color: var(--ods-color-success-300);
      background-color: var(--ods-color-success-100);
    }
  } @else if $color == 'warning' {
    border-color: var(--ods-color-warning-100);
    background-color: var(--ods-color-warning-000);
    color: var(--ods-color-warning-900);

    &:focus-visible,
    &:hover {
      border-color: var(--ods-color-warning-200);
      background-color: var(--ods-color-warning-050);
    }

    &:active {
      border-color: var(--ods-color-warning-300);
      background-color: var(--ods-color-warning-100);
    }
  }
}