/* We don't use 2xl, 3xl, 4xl map keys because in some Intellij configurations, these keys are reformatted */
:host {
  /**
   * @prop --availability-background: Background of the availability (when label given)
   * @prop --availability-dot-size: Dot size in pixel
   * @prop --availability-text-color: Availability text color (for the label)
   * @prop --availability-dot-border-color: Availability dot border color
   * @prop --availability-dot-background-color: Availability dot background color. Basically the same than border color, but can be overriden to be transparent.
   */
  --availability-background: var(--joy-color-secondary-10);
  --availability-dot-size: 15px;
  --availability-text-color: var(--joy-color-secondary-90);
  --availability-dot-border-color: var(--joy-color-secondary-90);
  --availability-dot-background-color: transparent;
  display: inline-flex;
}

.joy-availability {
  box-sizing: border-box;
  color: var(--availability-text-color);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  white-space: nowrap;
  text-align: center;
  border-radius: var(--joy-core-radius-4);
  height: var(--joy-core-spacing-7);
  font-weight: var(--joy-font-weight-normal);
  font-size: var(--joy-font-size-primary-200);
  line-height: var(--joy-line-height-large);
  font-family: var(--joy-font-family-base);
}
@media screen and (max-width: 767px) {
  .joy-availability {
    white-space: normal;
  }
}

.joy-availability-has-label {
  background-color: var(--availability-background);
  padding: var(--joy-core-spacing-1) var(--joy-core-spacing-2);
}

.joy-availability__dot {
  display: inline-flex;
  position: relative;
  border-radius: var(--joy-core-radius-6);
  margin-right: 6px;
  width: var(--availability-dot-size);
  height: var(--availability-dot-size);
  box-sizing: border-box;
}
.joy-availability__dot:before {
  content: "";
  box-sizing: border-box;
  position: absolute;
  left: 0;
  top: 0;
  width: 100%;
  height: 100%;
  border-radius: var(--joy-core-radius-6);
  border-width: 3px;
  border-style: solid;
  border-color: var(--availability-dot-border-color);
  background-color: var(--availability-dot-background-color);
}
.joy-availability__dot.NOT_AVAILABLE {
  --availability-dot-border-color: var(--joy-color-error-50);
  --availability-dot-background-color: var(--availability-dot-border-color);
}
.joy-availability__dot.NOT_AVAILABLE_WITH_DATE {
  --availability-dot-border-color: var(--joy-color-state-error);
}
.joy-availability__dot.AVAILABLE {
  --availability-dot-border-color: var(--joy-color-secondary-50);
  --availability-dot-background-color: var(--availability-dot-border-color);
}
.joy-availability__dot.AVAILABLE_AND_VERIFIED {
  --availability-dot-border-color: var(--joy-color-success-50);
  --availability-dot-background-color: var(--availability-dot-border-color);
}
.joy-availability__dot.AVAILABLE_SOON {
  --availability-dot-border-color: var(--joy-color-warning-50);
  --availability-dot-background-color: var(--availability-dot-border-color);
}
.joy-availability__dot.INVISIBLE {
  --availability-dot-border-color: var(--joy-color-state-error);
}
.joy-availability__dot.joy-availability--partial {
  --availability-dot-background-color: transparent;
}