@import "settings.breakpoints";
@import "settings.vars";

@import "mixins/tools.functions";
@import "mixins/tools.mixins";

@import "mixins/components.controls";
@import "mixins/components.header";

.c-header-title--article {
  .c-header-title__button-containers {
    .c-control {
      // makes the buttons less in height and font size smaller
      // applies to all breakpoints
      @include c-control--short;
      // margin is 8 because there's already a padding of 2, so because of math, that makes it a total of 10
      margin: 0 rem(8) 0 0;

      &:last-child {
        margin: 0;
      }
    }
  }
}

@include desktop-down {
  .c-header-title--article {
    .c-control--login,
    .c-control--search-button,
    .c-control--adchoice {
      @include c-control--grey-700;
    }
  }
}

@include tablet-portrait-down {
  .c-header-title--article {
    .c-control--adchoice {
      @include adchoice-no-label;
    }
  }
}

@include mobile-only {
  .c-header-title--article {
    .c-control--search-button,
    .c-control--register {
      display: none;
    }

    .c-control--register {
      @include c-control--grey-700;
    }

    .c-header-title__button-containers {
      .c-control {
        @include c-control--tight;
      }
    }

    .c-control--adchoice {
      @include adchoice-small;
    }
  }
}

@include xs-mobile-only {
  .c-header-title--article {
    .c-header-title__button-containers {
      .c-control {
        @include c-control--xs;

        // hides 4th social button and makes sure that control is NOT adchoice button
        &:not(.c-control--adchoice) {
          // sass-lint:disable nesting-depth
          &:nth-child(4) {
            display: none;
          }
          // sass-lint:enable nesting-depth
        }
      }

      .c-control--adchoice {
        .c-control__button {
          padding: 0 rem(12);
        }
      }
    }
  }
}
