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

@mixin typing-animation {
  --typing-animation: none;

  width: fit-content;
  position: relative;
  overflow: hidden;

  &::after {
    content: "|";
    display: block;
    width: 100%;
    height: 100%;
    position: absolute;
    top: 0;
    right: 0;
    background: var(--color-bg);
    color: var(--color-primary-darker);
    font-weight: 400;
    text-align: left;
    visibility: hidden;
    transform: translateX(100%);
    transform-origin: right;
    animation: var(--typing-animation);

    :global {
      animation: var(--typing-animation);
    }
  }
}

.wrapper {
  --logo-size: #{clamp(fun.convert-px(90), 12vw, fun.convert-px(100))};

  display: grid;
  grid-template-columns: minmax(0, 1fr);
  justify-items: center;
  width: 100%;

  @include mix.media("screen") {
    @include mix.dimensions("2xs") {
      grid-template-columns:
        var(--logo-size, fun.convert-px(100))
        minmax(0, 1fr);
      grid-template-rows: 1fr min-content;
      align-items: center;
      justify-items: left;
      column-gap: var(--spacing-sm);
      width: unset;
    }
  }

  .logo {
    grid-row: span 2;
    margin-bottom: var(--spacing-sm);

    @include mix.media("screen") {
      @include mix.dimensions("2xs") {
        margin-bottom: 0;
      }
    }
  }

  .title {
    font-size: clamp(var(--font-size-xl), 8vw, var(--font-size-2xl));
    text-align: center;

    @include typing-animation;
  }

  .baseline {
    color: var(--color-fg-light);
    font-size: var(--font-size-lg);
    text-align: center;

    @include typing-animation;
  }

  .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);
    }
  }
}