<commit_before>@import "../../variables";

.carousel {
  position: relative;
  width: 100%;
  background-color: #f5f5f2;
  overflow: hidden;
  margin: 32px 0;

  @include smartphone {
    margin: 24px 0;
  }

  .image-figure {
    width: 100%;
    margin: 0;
    left: 0;
    right: 0;
  }

  .image-figure__image {
    background-color: #000;
    height: 100%;
    position: absolute;
    top: 0;
    bottom: 0;
    right: 0;
    left: 0;
    object-fit: contain;
    min-width: 100%;
    width: 1px;
  }

  .image {
    background: rgba(0, 0, 0, .8);
    position: relative;

    &::before {
      content: '';
      display: block;
      padding-top: 75%;
    }
  }

  .slick-disabled {
    display: none !important; // hide from screenreader // TODO: There is a better way!
  }

  .slick-track {
    display: flex;
    flex-direction: row;
  }
}

.carousel__item {
  position: relative;
  float:left;
}

.carousel__link--prev,
.carousel__link--next {
  position: absolute;
  height: 64px;
  width: 40px;
  top: 37.5vw;
  transform: translate(0, -50%);
  padding: 0; // reset default button style
  background-color: transparent; // reset default button style
  background-repeat: no-repeat;
  background-position: 50%;<commit_msg>tiny fix because Dani asked nicely - no more focus outline on carousel items<commit_after>@import "../../variables";

.carousel {
  position: relative;
  width: 100%;
  background-color: #f5f5f2;
  overflow: hidden;
  margin: 32px 0;

  @include smartphone {
    margin: 24px 0;
  }

  .image-figure {
    width: 100%;
    margin: 0;
    left: 0;
    right: 0;
  }

  .image-figure__image {
    background-color: #000;
    height: 100%;
    position: absolute;
    top: 0;
    bottom: 0;
    right: 0;
    left: 0;
    object-fit: contain;
    min-width: 100%;
    width: 1px;
  }

  .image {
    background: rgba(0, 0, 0, .8);
    position: relative;

    &::before {
      content: '';
      display: block;
      padding-top: 75%;
    }
  }

  .slick-disabled {
    display: none !important; // hide from screenreader // TODO: There is a better way!
  }

  .slick-track {
    display: flex;
    flex-direction: row;
  }
}

.carousel__item {
  position: relative;
  float:left;

  &:focus {
    outline: none;
  }
}

.carousel__link--prev,
.carousel__link--next {
  position: absolute;
  height: 64px;
  width: 40px;
  top: 37.5vw;
  transform: translate(0, -50%);
  padding: 0; // reset default button style
  background-color: transparent; // reset default button style
  background-repeat: no-repeat;
  background-position: 50%;
{'fraction_non_alphanumeric': 0.1390728476821192, 'fraction_numerical': 0.039735099337748346, 'mean_word_length': 2.4938775510204083, 'pattern_counts': {'":': 0, '<': 3, '<?xml version=': 0, '>': 3, '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': '15311', 'n_tokens_mistral': 998, 'n_tokens_neox': 895, 'n_words': 242}