@use "hugo:vars" as v;

.header__content {
  margin-bottom: 0 auto 1rem auto;

  max-width: v.$max_content_width;
  display: flex;
  text-align: center;
  flex-wrap: wrap;
  gap: 4px;
  align-items: center;
  justify-content: start;
  padding: 20px 1.25rem;
  margin-left: auto;
  margin-right: auto;

  font-family: "Assistant";
  font-size: 17px;
  font-weight: 500;

  .header__logo {
    flex: 0 0 250px;
    max-width: 250px;
  }

  .header__spacer {
    flex: 1 1 auto;
  }

  .header__button--text {
    flex: 0 0 auto;
    color: v.$color_tertiary;
    padding: 8px 24px;
  }

  .header__button {
    flex: 0 0 auto;
    max-height: 55px;
    border-radius: 6px;
    padding: 13px 20px;
    background-color: v.$color_secondary;
    color: v.$color_secondary_contrast;
    display: flex;
    align-items: center;
    justify-content: center;

    &:hover {
      opacity: 0.7;
      cursor: pointer;
    }
  }

  .header__button__icon {
    height: 17px;
  }

}