@use '../../scss/palette' as palette;
@import '../../scss/supernova/styles/colors.css';
@import '../../scss/supernova/styles/spacers.css';

.dictionarytrigger {
  all: unset;
  font-size: inherit;
  line-height: inherit;
  cursor: help;
  padding: 0 var(--core-space-4xs);
  background-color: transparent;

  --dot-color: var(--color-help-border-normal);

  // The radial-gradient consists of a circle with empty space to the right, making up a dotted pattern when repeated horizontally
  background-image: radial-gradient(circle at 1.5px 1.5px, var(--dot-color) 1.5px, transparent 1.5px);
  background-repeat: repeat-x;
  background-size: 8px 3px;
  background-position: bottom left;

  &:hover {
    background-color: var(--color-help-background-transparent-onlight-hover);

    --dot-color: var(--color-help-border-dark);
  }

  &:focus-visible {
    outline: 2px solid palette.$black;
    background-image: none;
  }

  &[aria-expanded='true'] {
    background-color: var(--color-help-background-transparent-onlight-hover);

    --dot-color: var(--color-help-border-dark);

    &:hover,
    &:focus-visible {
      background-color: var(--color-help-background-transparent-onlight-hover-selected);
    }

    &:focus-visible {
      background-image: none;
    }
  }

  &:active {
    background-color: var(--color-help-background-transparent-onlight-hover-selected);

    --dot-color: var(--color-help-border-dark);
  }
}