@use "@styles/abstracts/functions" as fun;

.wrapper {
  display: grid;
  grid-template-columns:
    var(--logo-size, fun.convert-px(100))
    minmax(0, 1fr);
  grid-template-rows: 1fr min-content;
  align-items: center;
  column-gap: var(--spacing-sm);
}

.logo {
  grid-row: span 2;
}

.title {
  font-size: var(--font-size-2xl);
}

.baseline {
  color: var(--color-fg-light);
}

.link {
  background: linear-gradient(
      to top,
      var(--color-primary-light) fun.convert-px(5),
      transparent fun.convert-px(5)
    )
    left / 0 100% no-repeat;
  text-decoration: none;
  transition: all 0.6s ease-out 0s;

  &:hover,
  &:focus {
    background-size: 100% 100%;
  }

  &:focus {
    color: var(--color-primary-light);
  }

  &:active {
    background-size: 0 100%;
    color: var(--color-primary-dark);
  }
}