@import "../settings.colors";

@import "tools.functions";
@import "components.scroll-menu";

// Note: these mixins should be included within a .c-market-ticker{} block

@mixin c-market-ticker--collapsed($height: rem(44)) {
  @include c-market-ticker-height($height);
  @include c-scroll-menu-hide-arrows;

  .c-market-ticker-card {
    border-right-width: 0;
  }
  .c-market-ticker-card__content {
    flex-direction: row;
    align-items: center;
  }
  .c-market-ticker-card__arrow {
    display: none;
  }
  .c-market-ticker-card__row--name {
    padding-right: rem(8);
    padding-bottom: 0;
  }
  .c-market-ticker-card__row--time,
  .c-market-ticker-card__row--price {
    display: none;
  }
}

@mixin c-market-ticker--expanded($height: rem(100)) {
  @include c-market-ticker-height($height);
  @include c-scroll-menu-show-arrows-when-required;

  .c-market-ticker-card {
    border-right: 1px solid $color-stone-200;
  }
  .c-market-ticker-card__content {
    flex-direction: column;
    align-items: baseline;
  }
  .c-market-ticker-card__arrow {
    display: inline-block;
  }
  .c-market-ticker-card__row--name {
    padding-right: 0;
    padding-bottom: rem(6);
  }
  .c-market-ticker-card__row--time,
  .c-market-ticker-card__row--price {
    display: block;
  }
}

@mixin c-market-ticker-height($height) {
  .c-scroll-menu {
    @include c-scroll-menu-height($height);
  }
  .c-market-ticker-card {
    height: $height;
  }
}
