@import '../../../../globals/variables';
@import '../../../../globals/mixins';
@import '../../../../globals/fonts';
@import '../../../../globals/breakpoints';

.container {
  align-items: center;
  display: flex;
  height: 100%;
  justify-content: center;
}

.component {
  align-items: center;
  background: transparent;
  border: transparent;
  display: flex;
  justify-content: center;
  width: 12rem;

  @include respond-to('small-mobile') {
    width: 10rem;
  }

  @include respond-to('medium') {
    width: 6rem;
  }

  @include respond-to('large') {
    width: 8rem;
  }

  @include respond-to('extra-large') {
    width: 10rem;
  }
}

.component__label {
  color: $ads-color-main;
  font-family: Roboto, sans-serif;
  font-size: 1.25rem;
  font-weight: bold;
  line-height: 1.465rem;
  margin-left: 0.5rem;
  text-transform: uppercase;

  @include respond-to('small-mobile') {
    font-size: 0.7rem;
    margin-left: 0.4rem;
  }

  @include respond-to('medium') {
    font-size: 1rem;
    margin-left: 0.2rem;
  }

  @include respond-to('large') {
    font-size: 1rem;
    margin-left: 0.3rem;
  }

  @include respond-to('extra-large') {
    font-size: 1.1rem;
    margin-left: 0.4rem;
  }
}

.navbar__icon {
  align-items: center;
  display: flex;
  margin-right: 0.2rem;

  svg {
    height: 1.93rem;
    width: auto;

    @include respond-to('small-mobile') {
      height: 1.4rem;
    }

    @include respond-to('medium') {
      height: 1.8rem;
    }

    @include respond-to('large') {
      height: 2rem;
    }

    @include respond-to('extra-large') {
      height: 2rem;
    }
  }
}
