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

.header {
  background: fun.get-var(color-bg-secondary);
  overflow-y: auto;
  padding: fun.get-var(spacing-md)
    clamp(#{fun.get-var(spacing-md)}, 3vw, #{fun.get-var(spacing-lg)});
  scrollbar-color: fun.get-var(color-primary-light-opacity)
    fun.get-var(color-bg-tertiary);
  z-index: 5;

  @include mix.media("screen") {
    @include mix.dimensions("lg") {
      box-shadow: 0 -1px 2px 0 fun.get-var(color-shadow);
    }
  }
}

.branding {
  margin-bottom: clamp(
    #{fun.get-var(spacing-sm)},
    3vw,
    #{fun.get-var(spacing-md)}
  );
  text-align: center;

  &__title {
    font-family: fun.get-var(font-family-secondary);
    font-size: clamp(
      #{fun.get-var(font-size-2xl)},
      5vw,
      #{fun.get-var(font-size-3xl)}
    );
    font-weight: 500;
    margin: fun.get-var(spacing-xs) 0 fun.get-var(spacing-3xs);
  }

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

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

    &:active {
      background-size: 0 100%;
    }
  }

  &__description {
    font-family: fun.get-var(font-family-secondary);
    font-size: clamp(
      #{fun.get-var(font-size-md)},
      3vw,
      #{fun.get-var(font-size-lg)}
    );
    font-weight: 400;
    letter-spacing: fun.convert-px(1);
    margin: 0;
    text-transform: uppercase;
  }
}

.logo {
  margin: auto;
  position: relative;
  width: max-content;

  &__image {
    backface-visibility: hidden;
    border: fun.convert-px(3) solid fun.get-var(color-border-light);
    border-radius: 50%;
    box-shadow: 0 0 fun.convert-px(6) fun.convert-px(1)
      fun.get-var(color-shadow-darker);
    left: 0;
    position: absolute;
    top: 0;
    width: 100%;

    &--back {
      transform: rotateY(180deg);
    }
  }

  &__link {
    display: block;
    height: clamp(#{fun.convert-px(75)}, 15vmin, #{fun.convert-px(90)});
    transform-style: preserve-3d;
    transition: all 0.6s linear 0s;
    width: clamp(#{fun.convert-px(75)}, 15vmin, #{fun.convert-px(90)});

    &:hover,
    &:focus {
      outline: none;
      transform: rotateY(180deg);
    }

    &:hover &,
    &:focus & {
      &__image {
        &---front {
          transform: none;
        }

        &--back {
          transform: rotateY(180deg);
        }
      }
    }

    &:focus & {
      &__image {
        box-shadow: 0 0 fun.convert-px(6) fun.convert-px(1)
            fun.get-var(color-shadow-dark),
          0 0 0 fun.convert-px(5) fun.get-var(color-primary-light-opacity);
        outline: none;
      }
    }

    &:active & {
      &__image {
        box-shadow: 0 0 fun.convert-px(6) fun.convert-px(1)
            fun.get-var(color-shadow-dark),
          0 0 0 fun.convert-px(7) fun.get-var(color-primary-light-opacity);
      }
    }
  }

  &:hover & {
    &__link {
      transform: rotateY(180deg);
    }
  }
}