<commit_before>// Carousel styles
// ----------------------------------------------

/* SG
# Carousel
```
<ul class="CDB-Carousel">
  <li class="CDB-CarouselItem is-selected"></li>
  <li class="CDB-CarouselItem"></li>
  <li class="CDB-CarouselItem"></li>
  <li class="CDB-CarouselItem"></li>
  <li class="CDB-CarouselItem"></li>
</ul>
```
*/

@import 'cdb-utilities/mixins';
@import 'cdb-variables/sizes';
@import 'cdb-variables/colors';

.Carousel {
  position: relative;
}
.Carousel-list {
  @include display-flex();
  @include justify-content(flex-start);
  position: relative;
  padding-bottom: 19px;
}
.Carousel-item {
  @include display-flex();
  @include align-items(center);
  @include justify-content(center);
  width: $baseSize * 11;
  min-width: $baseSize * 11;
  height: $baseSize * 7;
  margin-right: 8px;
  border: 1px solid $cSecondaryLine;
  border-radius: 4px;
  background: $cThirdBackground;
  box-sizing: border-box;
  overflow: hidden;

  &:last-child {
    margin-right: 0;
  }
  &:hover {
    border: 1px solid $cMainLine;
    cursor: pointer;
  }
}
.Carousel-item--small {
  width: $baseSize * 5;
  min-width: $baseSize * 5;
  height: $baseSize * 5;
}
.Carousel-item.is-selected {
  border: 2px solid $cBlue;
}
.Carousel-shadow {
  @include transition(opacity, 400ms);
  @include opacity(0);
  display: block;
  position: absolute;
  top: 0;
  width: 30px;
  height: $baseSize * 7;
  pointer-events: none;
  z-index: 100;
}
.Carousel-shadow.is-visible {
  @include opacity(1);<commit_msg>Change selected and hover color to Carousel-item<commit_after>// Carousel styles
// ----------------------------------------------

/* SG
# Carousel
```
<ul class="CDB-Carousel">
  <li class="CDB-CarouselItem is-selected"></li>
  <li class="CDB-CarouselItem"></li>
  <li class="CDB-CarouselItem"></li>
  <li class="CDB-CarouselItem"></li>
  <li class="CDB-CarouselItem"></li>
</ul>
```
*/

@import 'cdb-utilities/mixins';
@import 'cdb-variables/sizes';
@import 'cdb-variables/colors';

.Carousel {
  position: relative;
}
.Carousel-list {
  @include display-flex();
  @include justify-content(flex-start);
  position: relative;
  padding-bottom: 19px;
}
.Carousel-item {
  @include display-flex();
  @include align-items(center);
  @include justify-content(center);
  width: $baseSize * 11;
  min-width: $baseSize * 11;
  height: $baseSize * 7;
  margin-right: 8px;
  border: 1px solid $cSecondaryLine;
  border-radius: 4px;
  background: $cThirdBackground;
  box-sizing: border-box;
  overflow: hidden;

  &:last-child {
    margin-right: 0;
  }
  &:hover {
    border: 2px solid $cBlueHover;
    cursor: pointer;
  }
}
.Carousel-item--small {
  width: $baseSize * 5;
  min-width: $baseSize * 5;
  height: $baseSize * 5;
}
.Carousel-item.is-selected {
  border: 2px solid #000;
}
.Carousel-shadow {
  @include transition(opacity, 400ms);
  @include opacity(0);
  display: block;
  position: absolute;
  top: 0;
  width: 30px;
  height: $baseSize * 7;
  pointer-events: none;
  z-index: 100;
}
.Carousel-shadow.is-visible {
  @include opacity(1);
{'fraction_non_alphanumeric': 0.1945716154349248, 'fraction_numerical': 0.019293655984303465, 'mean_word_length': 3.3328611898016995, 'pattern_counts': {'":': 0, '<': 27, '<?xml version=': 0, '>': 27, 'https://': 0, 'lorem ipsum': 0, 'www.': 0, 'xml': 0}, 'pii_count': 0, 'substrings_counts': 0, 'word_list_counts': {'cursed_substrings.json': 0, 'profanity_word_list.json': 0, 'sexual_word_list.json': 0, 'zh_pornsignals.json': 0}}
{'dir': 'git-commits-cleaned', 'id': '1687627', 'n_tokens_mistral': 1182, 'n_tokens_neox': 1115, 'n_words': 237}