@import "settings.colors";

@import "mixins/tools.mixins";

// Table for "Top results in Stocks, EFTS and Commodities"
// -----

$c-search-padding: rem(15);

.c-search__results {
  @include font-gm-sans;
  margin-bottom: rem(18);
  border-top: 1px solid transparent;
  font-size: rem(16);
  letter-spacing: rem(1);
}

.c-search__item {
  border-bottom: 1px solid transparent;
}
.c-search__link {
  display: flex;
  flex-wrap: nowrap;
  justify-content: flex-start;
  align-items: flex-start;
  align-content: center;
  text-decoration: none;
}
.c-search__col {
  padding: $c-search-padding 0;
}

// Column types
.c-search__col--symbol {
  padding-right: $c-search-padding;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  text-transform: uppercase;
  flex-basis: rem(80);
  flex-shrink: 0;
}

.c-search__col--name {
  padding-left: $c-search-padding;
  padding-right: $c-search-padding;
  flex-grow: 1;
}

.c-search__col--security {
  padding-left: $c-search-padding;
  padding-right: $c-search-padding;
  font-size: rem(11);
  text-transform: uppercase;
  text-align: left;
  flex-basis: rem(65);
  flex-shrink: 0;
}

.c-search__col--flag {
  flex-basis: rem(20);
  flex-grow: none;
  flex-shrink: 0;
}

.c-search__col__flag {
  display: block;
  width: rem(20);
  height: rem(14);
  border: 1px solid transparent;
}


// Default - light version
.c-search__results {
  color: $color-grey-900;
  border-top-color: $color-grey-200;
  .c-search__item {
    border-bottom-color: $color-grey-100;
  }
  .c-search__link {
    color: $color-grey-900;
    &:hover, &:focus, &:active {
      .c-search__col--name {
        color: $color-grey-500;
        text-decoration: underline;
      }
    }
  }
  .c-search__col--security {
    color: $color-grey-660;
  }
  .c-search__col__flag {
    border-color: $color-grey-100;
  }
}


// Alternate - dark version
.c-search__results--dark {
  color: $color-white;
  border-top-color: $color-grey-500;
  .c-search__item {
    border-bottom-color: $color-grey-700;
  }
  .c-search__link {
    color: $color-white;
    &:hover, &:focus, &:active {
      .c-search__col--name {
        color: $color-grey-300;
        text-decoration: underline;
      }
    }
  }
  .c-search__col--security {
    color: $color-white;
  }
  .c-search__col__flag {
    border-color: $color-grey-800;
  }
}
