@import "settings.breakpoints";
@import "settings.colors";
@import "settings.fonts";

@import "mixins/components.controls";
@import "mixins/components.scroll-menu";
@import "mixins/components.market-ticker";
@import "mixins/settings.fonts";
@import "mixins/tools.mixins";

/////////////////////////
// MAIN CONTAINER
/////////////////////////
.c-scroll-menu.c-scroll-menu--markets {
  width: auto;
  height: rem(100);
  border: 1px solid $color-stone-200;
  margin: rem(10) 0;

  .c-control--white {
    &.c-control--arrow--left,
    &.c-control--arrow--right {
      border: none;
      height: auto;
      padding: rem(2);
    }

    .c-control__button {
      height: 100%;

      .c-control__icon {
        position: static;
      }
    }
  }

  .c-scroll-menu__nav--markets {
    &::before,
    &::after {
      background: transparent;
    }
  }
}

/////////////////////////
// NAV (scrollable)
/////////////////////////
.c-scroll-menu__nav--markets {
  position: relative;
  border-left: 1px solid $color-stone-200;
  border-right: 1px solid $color-stone-200;
}

/////////////////////////
// MENU LIST
/////////////////////////
.c-scroll-menu__list.c-scroll-menu__list--markets {
  // will hide the scrollbar in FF (20px more than the height)
  height: rem(120);
}

/////////////////////////
// CARD
/////////////////////////
.c-markets-card {
  @include font-gm-sans;
  display: flex;
  flex: 1 0 rem(125);
  padding: rem(2) rem(15);
  margin: rem(2);
  transition: background-color 0.3s ease;
  text-decoration: none;
  height: rem(94);
  min-width: rem(125);
  flex-direction: column;
  justify-content: center;
  background-color: $color-white;

  &:hover,
  &:focus {
    background-color: $color-stone-150;
  }
}

.c-scroll-menu__nav--markets {
  .c-scroll-menu__item {
    border-right: 1px solid $color-stone-200;

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

.c-markets-card__row {
  font-size: rem(14);
  color: $color-grey-660;
}

.c-markets-card__row-name {
  padding: 0 0 rem(6) 0;
}

.c-markets-card__content {
  flex-direction: column;
  align-items: baseline;
  white-space: nowrap;
}

.c-markets-card__name {
  @include font-gm-sans-bold;
  color: $color-grey-900;
  text-transform: uppercase;
}

.c-markets-card__arrow {
  display: inline-block;
  width: rem(10);
  height: rem(10);
  border-left: rem(5) solid transparent;
  border-right: rem(5) solid transparent;
}

.c-markets-card__arrow--down {
  border-top: rem(10) solid $color-red-500;
}

.c-markets-card__arrow--up {
  border-bottom: rem(10) solid $color-green;
}

.c-markets-card__change--down {
  color: $color-red-500;
}

.c-markets-card__change--up {
  color: $color-green;
}

.c-markets-card__row-time {
  text-transform: uppercase;
  font-size: rem(10);
  line-height: rem(20);
}

.c-markets-card__row-time,
.c-markets-card__row-price {
  display: block;
}


// mixins and styles for tablet down
@include tablet-down {
  @include c-scroll-menu-no-arrows;

  .c-scroll-menu.c-scroll-menu--markets {
    @include stock-scroll-small;
  }

  .c-scroll-menu__list.c-scroll-menu__list--markets {
    @include stock-scroll-short;
  }
}

@include mobile-only {
  .c-scroll-menu.c-scroll-menu--markets {
    margin: rem(10) 0;
  }
}
