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

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

.header {
  display: flex;
  flex-flow: row wrap;
  gap: var(--spacing-md) var(--spacing-xl);
  align-items: center;
  padding: clamp(var(--spacing-md), 3vh, var(--spacing-xl)) 0;
  border-bottom: fun.convert-px(3) solid var(--color-border-light);
}

.branding,
.navbar {
  margin-inline: auto;
}

.logo {
  --logo-size: #{clamp(
      fun.convert-px(95),
      calc(120px - 5vw),
      fun.convert-px(120)
    )};

  animation: flip-logo 9s ease-in 0s 1;
}

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

  @extend %typing-animation;
}

.baseline {
  color: var(--color-fg-light);
  font-size: var(--font-size-lg);
  font-weight: 600;

  @extend %typing-animation;
}

.search,
.settings {
  @include mix.media("screen") {
    @include mix.dimensions("sm") {
      min-width: 30ch;
    }
  }
}

@keyframes flip-logo {
  0%,
  90% {
    transform: rotateY(180deg);
  }

  100% {
    transform: rotateY(0deg);
  }
}