/* ==================================
   #PILLS
   ================================== */

/* Variables
   ========================================================================== */

$au-pill-color: var(--vl-grey-70) !default;
$au-pill-color-hover: var(--vl-grey-80) !default;
$au-pill-background-color: var(--vl-grey-05) !default;
$au-pill-border-width: 0.1rem !default;
$au-pill-border-color: var(--vl-grey-50) !default;
$au-pill-font-size: var(--au-small) !default;
$au-pill-color-border: var(--vl-grey-70) !default;
$au-pill-color-border-hover: var(--vl-grey-80) !default;
$au-pill-background-color-border: var(--au-white) !default;
$au-pill-border-color-border: var(--vl-grey-20) !default;
$au-pill-color-success: var(--vl-green-130) !default;
$au-pill-background-color-success: var(--vl-green-10) !default;
$au-pill-border-color-success: var(--vl-green-100) !default;
$au-pill-color-warning: var(--vl-orange-120) !default;
$au-pill-background-color-warning: var(--vl-orange-10) !default;
$au-pill-border-color-warning: var(--vl-orange-100) !default;
$au-pill-color-error: var(--vl-red-130) !default;
$au-pill-background-color-error: var(--vl-red-10) !default;
$au-pill-border-color-error: var(--vl-red-100) !default;
$au-pill-color-link: var(--au-blue-700) !default;
$au-pill-color-link-hover: var(--au-blue-900) !default;
$au-pill-background-color-link: var(--au-blue-100) !default;
$au-pill-background-color-link-hover: var(--au-white) !default;
$au-pill-border-color-link: var(--au-blue-300) !default;
$au-pill-color-ongoing: var(--vl-picton-120) !default;
$au-pill-background-color-ongoing: transparent !default;
$au-pill-border-color-ongoing: var(--vl-picton-120) !default;

$au-pill-font-size-small: var(--au-tiny) !default;
$au-pill-line-height-small: 1.3 !default;
$au-pill-gap-small: 0.4rem !default;

/* Component
  ========================================================================== */

.au-c-pill {
  @include au-font-size(var(--au-base));
  display: inline-flex;
  gap: $au-unit-tiny;
  align-items: center;
  font-family: var(--au-font);
  font-weight: var(--au-medium);
  border: $au-pill-border-width solid $au-pill-border-color;
  padding: 0.1rem $au-unit-tiny 0; // Visually center the text in the pill
  border-radius: $au-unit-tiny;
  min-height: 2.55rem;

  &.au-c-pill--hover {
    text-decoration: none;
    cursor: default;
  }

  &.au-c-pill--hover:focus {
    outline: var(--au-outline);
    outline-offset: var(--au-outline-offset);
  }
}

.au-c-pill-container {
  display: inline-flex;
  align-items: center;

  > .au-c-pill {
    border-right: 0;
    border-top-right-radius: 0;
    border-bottom-right-radius: 0;
  }

  > .au-c-pill-action {
    border-top-left-radius: 0;
    border-bottom-left-radius: 0;
  }
}

.au-c-pill-action {
  @include au-font-size(var(--au-base));
  display: inline-flex;
  gap: $au-unit-tiny;
  align-items: center;
  font-family: var(--au-font);
  font-weight: var(--au-medium);
  color: $au-pill-color-link;
  background-color: $au-pill-background-color-link;
  border: $au-pill-border-width solid $au-pill-border-color-link;
  padding: 0 $au-unit-tiny 0; // Visually center the text in the pill
  border-radius: $au-unit-tiny;
  min-height: 2.55rem;
  text-decoration: none;
  cursor: pointer;

  &:hover,
  &:focus {
    background-color: $au-pill-background-color-link-hover;
  }

  &:focus {
    outline: var(--au-outline);
    outline-offset: var(--au-outline-offset);
  }
}

/* Sizes
  ========================================================================== */

.au-c-pill--small,
.au-c-pill-action--small {
  font-size: $au-pill-font-size-small;
  line-height: $au-pill-line-height-small;
  gap: $au-pill-gap-small;
  min-height: 2.25rem;
}

.au-c-pill--small {
  padding: 0.1rem 0.4rem 0;
}

.au-c-pill-action--small {
  padding: 0 0.4rem 0;
}

/* Modifiers
  ========================================================================== */

.au-c-pill--default {
  color: $au-pill-color;
  background-color: $au-pill-background-color;
  border-color: $au-pill-border-color;

  &.au-c-pill--hover:hover,
  &.au-c-pill--hover:focus {
    background-color: $au-pill-background-color-link-hover;
  }
}

.au-c-pill--border {
  color: $au-pill-color-border;
  background-color: $au-pill-background-color-border;
  border-color: $au-pill-border-color-border;

  &.au-c-pill--hover:hover,
  &.au-c-pill--hover:focus {
    color: $au-pill-color-border-hover;
    background-color: $au-pill-background-color-link-hover;
  }
}

.au-c-pill--ongoing {
  color: $au-pill-color-ongoing;
  background-color: $au-pill-background-color-ongoing;
  border-color: $au-pill-border-color-ongoing;

  &.au-c-pill--hover:hover,
  &.au-c-pill--hover:focus {
    background-color: $au-pill-background-color-link-hover;
  }
}

.au-c-pill--link {
  color: $au-pill-color-link;
  background-color: $au-pill-background-color-link;
  border-color: $au-pill-border-color-link;

  &.au-c-pill--hover:hover,
  &.au-c-pill--hover:focus {
    color: $au-pill-color-link-hover;
    background-color: $au-pill-background-color-link-hover;
  }
}

.au-c-pill--success {
  color: $au-pill-color-success;
  background-color: $au-pill-background-color-success;
  border-color: $au-pill-border-color-success;

  &.au-c-pill--hover:hover,
  &.au-c-pill--hover:focus {
    background-color: $au-pill-background-color-link-hover;
  }
}

.au-c-pill--warning {
  color: $au-pill-color-warning;
  background-color: $au-pill-background-color-warning;
  border-color: $au-pill-border-color-warning;

  &.au-c-pill--hover:hover,
  &.au-c-pill--hover:focus {
    background-color: $au-pill-background-color-link-hover;
  }
}

.au-c-pill--error {
  color: $au-pill-color-error;
  background-color: $au-pill-background-color-error;
  border-color: $au-pill-border-color-error;

  &.au-c-pill--hover:hover,
  &.au-c-pill--hover:focus {
    background-color: $au-pill-background-color-link-hover;
  }
}

.au-c-pill--draft {
  border-style: dashed;
  background-color: transparent;

  &.au-c-pill--hover:hover,
  &.au-c-pill--hover:focus {
    background-color: $au-pill-background-color-link-hover;
  }
}