.dock {
  background-color: var(--wds-color-fill-surface-sunken);
  box-shadow: inset var(--wds-inner-shadow-x-input)
    var(--wds-inner-shadow-y-input) var(--wds-inner-shadow-blur-input)
    var(--wds-inner-shadow-fill-input);

  &--disabled {
    background-color: var(--wds-color-fill-standard-secondary-disabled);
  }
}

.dock__point {
  &:not(&--selected) &__indicator {
    width: 3px;
    height: 3px;
    background-color: var(--wds-color-text-standard-secondary-light);
  }

  @media (hover: hover) {
    &:hover:not(&--selected):not(:disabled) &__background {
      background-color: var(--wds-color-fill-dark-secondary-active);
    }
  }

  &:focus-visible:not(&--selected) &__background {
    background-color: var(--wds-color-fill-dark-secondary-active);
  }

  &:disabled:not(&--selected) &__indicator {
    background-color: var(--wds-color-text-disabled);
  }
}