@mixin fit() {
  overflow-x: visible;

  & > *:not(.cobalt-horizontal-list__padding-block) {
    width: 100%;
  }
}

.cobalt- {
  &horizontal-list {
    display: flex;

    flex-wrap: nowrap;
    overflow-x: auto;

    -webkit-overflow-scrolling: touch;

    &::-webkit-scrollbar {
      display: none;
    }
  }
}

@include breakpoint($from: xs) {
  .xs\:cobalt-horizontal-list--fit {
    @include fit();
  }
}

@include breakpoint($from: sm) {
  .sm\:cobalt-horizontal-list--fit {
    @include fit();
  }
}

@include breakpoint($from: md) {
  .md\:cobalt-horizontal-list--fit {
    @include fit();
  }
}

@include breakpoint($from: lg) {
  .lg\:cobalt-horizontal-list--fit {
    @include fit();
  }
}