:host {
  /**
   * @prop --indicator-default-color: customize indicator background-color.
   * @prop --indicator-default-color-hover: customize indicator background-color on hover.
   * @prop --indicator-default-color-active: customize indicator background-color when active.
   * @prop --indicator-default-color-selected: customize indicator background-color when selected.
   * @prop --indicator-width: customize indicator width.
   * @prop --indicator-height: customize indicator height.
   * @prop --indicator-radius: customize indicator border-radius.
   */
  --indicator-default-color: var(--joy-color-neutral-30);
  --indicator-default-color-hover: var(--joy-color-neutral-40);
  --indicator-default-color-active: var(--joy-color-neutral-50);
  --indicator-default-color-selected: var(--joy-color-secondary-30);
  --indicator-width: 30px;
  --indicator-radius: var(--joy-core-radius-3);
  --indicator-height: var(--joy-core-spacing-3);
  height: var(--indicator-height);
  width: var(--indicator-width);
  box-sizing: border-box;
}

:host(.joy-indicator--light) {
  --indicator-default-color: rgba(0, 0, 0, 0.2);
  --indicator-default-color-hover: rgba(0, 0, 0, 0.2);
  --indicator-default-color-active: rgba(0, 0, 0, 0.2);
  --indicator-default-color-selected: white;
  --indicator-width: 30px;
  --indicator-height: var(--joy-core-spacing-3);
  height: var(--indicator-height);
  width: var(--indicator-width);
}

.joy-indicator--button {
  position: relative;
  display: block;
  font-size: 0;
  appearance: none;
  background: var(--indicator-default-color);
  width: var(--indicator-width);
  height: var(--indicator-height);
  margin-right: 8px;
  border-radius: var(--indicator-radius);
  cursor: pointer;
  border: 0;
  outline: none;
  transition: background var(--joy-transition-duration-short) var(--joy-transition-timing-function);
}
.joy-indicator--button:hover {
  background: var(--indicator-default-color-hover);
}
.joy-indicator--button:active {
  background: var(--indicator-default-color-active);
}
.joy-indicator--button-selected, .joy-indicator--button-selected:hover {
  background: var(--indicator-default-color-selected);
}
.joy-indicator--button:before {
  content: "";
  position: absolute;
  top: -2px;
  left: -2px;
  border-radius: var(--joy-core-radius-4);
  width: calc(100% + 4px);
  height: calc(100% + 4px);
  transition: box-shadow var(--joy-transition-duration-default);
}
.joy-indicator--button:focus-visible:before {
  box-shadow: 0 0 0 2px var(--joy-color-neutral-60);
}