@import '../prefix';

.#{$prefix}--subfamilies-menu-tabs {
  width: 100%;
  padding-left: 0 !important;
}

.#{$prefix}--hide {
  display: none;
}
.#{$prefix}--show {
  display: block;
}

.#{prefix}--subfamilies-fonts-preload {
  margin-top: $spacing-07;
  height: 0;
  visibility: hidden;

  * {
    font-family: 'IBM Plex Sans Condensed';
  }
}

.#{$prefix}--subfamilies-tabs-container {
  margin-left: -0.5rem;
  margin-right: -0.5rem;
}

.#{$prefix}--subfamilies-dropdown-container {
  width: 100%;
  margin-left: -1rem;
  margin-right: -1rem;

  @include breakpoint('sm') {
    margin-left: -0.5rem;
    margin-right: 0rem;
  }
}

.#{$prefix}--subfamilies-button {
  @include carbon--type-style('body-long-01');
  text-align: left;
  color: $carbon--black-100;
  background-color: $carbon--white-0;
  box-sizing: border-box !important;
  border: none;
  border-bottom: rem(1px) solid $carbon--gray-20;
  border-right: rem(1px) solid $carbon--gray-20;
  cursor: pointer;
  height: 3rem;
  position: relative;
  margin: 0;
  padding-left: $spacing-05;
  padding-right: $spacing-05;
  box-sizing: border-box;
  white-space: nowrap;
  text-overflow: ellipsis;

  &:hover {
    background-color: $carbon--gray-10;
  }

  &:last-child {
    border-right: none;
  }

  &.active {
    color: $carbon--white-0;
    background-color: $carbon--black-100;

    &:hover {
      background-color: $carbon--black-100;
    }
  }
}

.#{$prefix}--padding-left-none {
  padding-left: 0 !important;
}

.#{$prefix}--subfamilies {
  width: calc(100% + 1.5rem) !important;
  margin-right: 0rem;
  margin-left: -0.25rem;

  @include breakpoint('md') {
    width: calc(100% + 1rem) !important;
    margin-right: -1rem;
    margin-left: -0.25rem;
  }
}

.#{$prefix}--subfamilies-TypeTesterExample {
  @include carbon--type-style('expressive-heading-05');
  background-color: $carbon--white-0;
  padding-top: $spacing-05;
  padding-bottom: 2.5rem;
  margin-bottom: 0;
  margin-left: -0.5rem !important;
  margin-right: -0.5rem !important;

  @include breakpoint('md') {
    margin-left: -0.5rem !important;
  }

  .ibm-type-italic {
    font-style: italic;
  }
}