@use '~styles/breakpoints.scss' as *;
@use '~styles/global.scss' as *;

.header {
  width: 100%;

  display: block;

  margin-bottom: 1rem;

  padding: 1.6rem;

  background: rgba(255, 255, 255, 0.01);
  box-shadow: 0 0.4rem 0.4rem 0 rgba(0, 0, 0, 0.25);

  .nav {
    display: flex;

    align-items: center;

    justify-content: space-between;

    .list {
      display: flex;
      gap: 3rem;

      .item {
        display: none;

        align-items: center;
        justify-content: center;
      }

      .hamburguerIcon {
        color: $tertiaryPurple;
      }
    }

    .link {
      min-width: 1.9rem;
      max-width: 12rem;
      min-height: 1.9rem;

      display: flex;

      align-items: center;
      justify-content: center;
    }
  }
}

@include from905 {
  .header {
    .nav {
      .list {
        .item {
          display: flex;
        }
      }

      .hamburguerIcon {
        display: none;
      }
    }
  }
}

@include from1240 {
  .header {
    margin-bottom: 2.4rem;

    .nav {
      .link {
        min-width: 3rem;
        max-width: 21rem;
      }
    }
  }
}
