@use "_sizes";

.draco-link {
  cursor: pointer;
  display: inline-flex;
  position: relative;
  align-items: center;
  justify-content: center;
  text-align: center;
  text-decoration: none;
  color: var(--token-color-palette-neutral-100);
  font-family: var(--token-typography-display-400-font-family);
  font-weight: var(--token-typography-font-weight-regular);

  .draco-link__text {
    flex: 1 0 auto;
    display: inline-flex;
    text-align: center;
    position: relative;

    &::after {
      content: '';
      position: absolute;
      left: 0;
      bottom: -5px;
      width: 100%;
      height: 0;
      background-color: currentColor;
      opacity: 0;
      transition: height 0.2s ease-in-out, opacity 0.2s ease-in-out;
    }
  }

  &:hover .draco-link__text::after {
    height: 1px;
    opacity: 1;
  }

  &.draco-link--external-indicator {
    display: inline-flex;
    position: relative;
    color: white;
  }
}