.root {
  all: unset;
  cursor: pointer;
  display: flex;
  align-items: center;

  &:focus-visible {
    outline: none;
    text-decoration-line: underline;
  }
}

.color-primary {
  color: var(--purple9);

  &:hover {
    color: var(--purple8);
  }

  &:active {
    color: var(--purple9);
  }
}

.color-secondary {
  color: var(--indigo11);

  &:hover {
    color: var(--indigo10);
  }

  &:active {
    color: var(--indigo11);
  }
}

.endIcon {
  padding-left: 4px;
}

.icon-normal {
  font-size: 1.2rem;
  width: 18px;
  height: 18px;
}

.icon-smallBold {
  font-size: 1rem;
  width: 16px;
  height: 16px;
}

.icon-inherit {
  font-family: inherit;
  font-size: inherit;
  width: inherit;
  height: inherit;
}