a,
li {
  text-decoration: none;
  list-style-type: none;
  font-size: inherit;
  flex: 0 0 auto;
}

a {
  padding: var(--padding-link);
  color: inherit;
  transition: var(--transition-default);
}

.icon {
  width: var(--size-icon-default);
  height: var(--size-icon-default);
}

.logos img {
  height: var(--logo-height-default);
  width: auto;
}

/* BUTTONS */
.btn,
.btn:link,
.btn:visited {
  display: inline-block;
  text-decoration: none;
  font-size: calc(var(--font-small) + 0.1rem);
  font-weight: var(--weight-normal);
  padding: var(--padding-button);
  border-radius: var(--radius-large);

  /* Only necessary for .btn */
  border: none;
  cursor: pointer;
  font-family: var(--font-alaska);

  /* Trick for a nicer transitioning of button's color in hover state */
  /* Put it always on the original/default "state" */
  transition: var(--transition-default);
}

button.btn {
  padding: var(--padding-form-button);
}

.btn--full:link,
.btn--full:visited,
button.btn--full {
  background-color: var(--color-primary);
  color: var(--color-white);
}

.btn--full:hover,
.btn--full:active,
button.btn--full:hover {
  background-color: var(--color-primary-dark);
}

.btn--outline:link,
.btn--outline:visited {
  background-color: var(--color-white);
  color: var(--color-primary);
  border: 0.1rem solid currentColor;
}

.btn--outline:hover,
.btn--outline:active {
  color: var(--color-primary-dark);
}

.header-buttons--login:link,
.header-buttons--login:visited {
  background-color: var(--color-secondary-alpha);
  color: var(--color-secondary);
}

.header-buttons--login:hover,
.header-buttons--login:active,
.header-buttons--login:hover::after {
  background-color: var(--color-secondary-alpha-hover);
}

.header-buttons--portal:link,
.header-buttons--portal:visited {
  background-color: var(--color-quaternary-alpha);
  color: var(--color-quaternary);
}

.header-buttons--portal:hover,
.header-buttons--portal:active,
.header-buttons--portal:hover::after {
  background-color: var(--color-quaternary-alpha-hover);
}

.header-buttons a.btn:not(.btn--full) {
  border: var(--border-transparent);
}

.lang-btn {
  appearance: none;
  outline: none;
  background: none;
  border: none;
  font-size: inherit;
  padding: var(--padding-link);
  height: 4.3rem;
  width: 8.1rem;
  transition: var(--transition-default);
}

.social-link:link,
.social-link:visited,
.social {
  color: var(--color-accent-light);
  background-color: var(--color-background-complementary);
}

/* MOBILE NAVIGATION */
.header-nav--mobile {
  border: none;
  background: none;
  cursor: pointer;
  display: none;
}

.nav-icon {
  height: var(--size-icon-list);
  width: var(--size-icon-list);
  color: var(--color-secondary);
}