@import '../../../_variables.scss';
@import 'node_modules/include-media/dist/_include-media.scss';

.HeaderComponent {
  &__layout {
    display: flex;
    align-items: center;

    @include media("<=xs") {
      flex-direction: column;
    }
  }

  &__layout--higher  {
    @include media("<=xs") {
      height: 70px;
    }
  }

  &__layout--highest  {
    @include media("<=xs") {
      height: 100px;
    }
  }

  &__menuicon {
    bottom: 0;
  }

  &__link {
    text-decoration: none;
  }

  &__linkbox {
    background-color: white;
    font-size: 0.8rem;
    line-height: normal;
    padding: 0.2rem;
    border-radius: 2px;
    margin-right: 0.3rem;

    @include media("<=xs") {
      margin-bottom: 4px;
    }
  }

  &__linkboxes {
    display: flex;
    flex-direction: row;

    @include media("<=xs") {
      flex-direction: column;
    }
  }

  &__title {
    margin-right: 1rem;
    margin-bottom: 0;
    font-size: large;

    @include media("<=xs") {
      margin-right: 0;
    }
  }

  &__versionQualifier {
    background-color: orange;
    font-weight: bold;
    padding: 0.1rem;
    margin-right: 0.2rem;
    border-radius: 2px;
  }
}

mat-toolbar {
  border-radius: 3px;

  @include media("<=xs") {
    border-radius: 0;
  }
}
