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

@import "settings.fonts";
@import "tools.mixins";

@mixin c-financial-recently-viewed-sm {
  .c-recently-viewed-ticker {
    .c-card__label {
      display: inline-block;
      margin-right: rem(10);
      margin-bottom: 0;
    }
  }
  .c-recently-viewed-ticker__stocks {
    display: inline-block;
  }
}

@mixin c-financial-recently-viewed-md {
  .c-recently-viewed-ticker {
    padding: 0;
    border-width: 0 0 1px;

    .c-card__label {
      display: block;
      margin-right: 0;
      padding: rem(10) rem(7);
      font-size: rem(14);
    }
  }

  .c-recently-viewed-ticker__stocks {
    width: 100%;
    padding: rem(10);
    border-width: 0 1px;
    border-style: solid;
    border-color: $color-stone-200;
  }

  .c-recently-viewed-ticker__link {
    @include display-grid;
    @include grid-template-columns(0, rem(60) 1fr);
    border-bottom: 1px solid $color-stone-200;
    line-height: 1;
    padding: rem(10) 0;

    &:first-of-type {
      padding: rem(5) 0 rem(10);
    }
  }

  .c-recently-viewed-ticker__comma {
    display: none;
  }

  .c-recently-viewed-ticker__symbol {
    @include grid-column(1, 2);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    display: block;
  }

  .c-recently-viewed-ticker__name {
    @include grid-column(2, 3);
    display: block;
    padding-left: rem(5);
  }

  .c-recently-viewed-ticker__actions {
    @include display-grid;
    @include grid-template-columns(rem(10), 1fr 1fr);
    padding: 0 rem(10) rem(10);
    border-width: 0 1px;
    border-style: solid;
    border-color: $color-stone-200;
    .c-button {
      @include grid-column(1, 2, true);
      padding: rem(7);
      &:last-of-type {
        @include grid-column(2, 3, true);
      }

      .c-button__text {
        font-size: rem(12);
      }
    }
  }
}
