@use 'sass:math';
@use '@material/tab/mixins' as tab-mixins;
@use '@material/tab-indicator/mixins' as tab-indicator-mixins;
@use '@material/ripple/mixins' as ripple-mixins;
@use '@material/theme' as color;
@use '@material/typography/mixins' as typography-mixins;

.custom-tab {
  @include tab-mixins.text-label-color(color.$blue-300);
  @include tab-mixins.icon-color(color.$orange-300);
  .custom-tab-indicator {
    @include tab-indicator-mixins.underline-color(color.$pink-a700);
    @include tab-indicator-mixins.underline-height(5px);
    @include tab-indicator-mixins.underline-top-corner-radius(5px);
  }
  .mdc-tab__ripple {
    @include ripple-mixins.states(color.$pink-100);
  }
  &.mdc-tab--active {
    @include tab-mixins.text-label-color(color.$blue-900);
    @include tab-mixins.icon-color(color.$orange-900);
  }
}

/* tab bar */
.hero-demo-tab-bar {
  background-color: #f2f2f2;
  max-width: 420px;
}
.custom-demo-tab-bar {
  .mdc-tab {
    @include typography-mixins.typography(subtitle1);
    @include tab-mixins.fixed-width(120px);
    @include tab-mixins.text-label-color(color.$blue-600);
    @include tab-mixins.icon-color(color.$orange-600);
  }
  .mdc-tab__ripple {
    @include ripple-mixins.states(color.$yellow-700);
  }
  .mdc-tab--active {
    @include tab-mixins.text-label-color(color.$blue-900);
    @include tab-mixins.icon-color(color.$blue-900);
  }
  .mdc-tab-indicator {
    @include tab-indicator-mixins.underline-height(5px);
    @include tab-indicator-mixins.underline-color(color.$yellow-700);
  }
}

/* tab scroller */
.demo-scroller {
  width: 360px;
  outline: 1px solid color.$grey-400;
}
.demo-cube {
  width: 43px;
  height: 43px;
  margin: 10px;
}
@for $i from 1 through 34 {
  .demo-cube:nth-child(#{$i}) {
    background-color: rgb(
      10 + math.random(230),
      10 + math.random(230),
      10 + math.random(230)
    );
  }
}
.demo-controller {
  padding: 10px 0;
}
.demo-controller-row {
  padding: 5px 0;
}
