@import "settings.colors";

@import "mixins/settings.fonts";
@import "mixins/tools.functions";
@import "mixins/components.market-ticker";

.c-market-ticker {
  .c-scroll-menu {
    border: 1px solid $color-stone-200;
  }
  .c-scroll-menu__inner {
    background-color: $color-white;
  }
  .c-scroll-menu__arrow--left {
    border-left: none;
    border-right: 1px solid $color-stone-200;
  }
  .c-scroll-menu__arrow--right {
    border-left: 1px solid $color-stone-200;
    border-right: none;
  }

  .c-scroll-menu__item {
    flex-grow: 1;
  }
}
.c-market-ticker-card {
  min-width: rem(130);
  flex: 1 0 rem(130);
  display: flex;
}
.c-market-ticker-card__link {
  margin: rem(2);
  padding: 0 rem(15);
  @include font-gm-sans;
  text-decoration: none;
  flex: 1;
  display: flex;
  flex-direction: column;
  justify-content: center;
  transition: background-color 0.3s ease;
  background-color: $color-white;
  &:hover,
  &:focus {
    background-color: $color-stone-150;
  }
}
.c-market-ticker-card__content {
  display: flex;
  white-space: nowrap;
}
.c-market-ticker-card__row {
  font-size: rem(14);
  color: $color-grey-660;
}
.c-market-ticker-card__row--time {
  text-transform: uppercase;
  font-size: rem(10);
  line-height: rem(20);
}
.c-market-ticker-card__name {
  @include font-gm-sans-bold;
  color: $color-grey-900;
  text-transform: uppercase;
}
.c-market-ticker-card__arrow {
  width: rem(10);
  height: rem(10);
  border-left: rem(5) solid transparent;
  border-right: rem(5) solid transparent;
}
.c-market-ticker-card__arrow--down {
  border-top: rem(10) solid $color-red-500;
}
.c-market-ticker-card__arrow--up {
  border-bottom: rem(10) solid $color-utility-green-800;
}
.c-market-ticker-card__change--down {
  color: $color-red-500;
}
.c-market-ticker-card__change--up {
  color: $color-utility-green-800;
}
.c-market-ticker,
.c-market-ticker--collapsed {
  @include c-market-ticker--collapsed;
}
.c-market-ticker--collapsed-with-arrows {
  .c-scroll-menu__arrow {
    display: block;
  }
}
.c-market-ticker--expanded {
  @include c-market-ticker--expanded;
}
