.section .carousel-wrapper {
  padding: 0 var(--spacing-m);
}

.carousel-wrapper:has(> div[class*="bg-grey"]) {
  padding: 0;
  max-width: unset;
}

.carousel.block {
  --carousel-controls-size: 20px;
  --carousel-nav-size: 15px;

  border-top: 1px solid transparent;
  border-bottom: 1px solid transparent;

  .hidden {
    display: none;
  }

  &.bg-grey {
    padding: 0 var(--spacing-m);
    background-color: var(--color-neutral-720);

    > div {
      max-width: var(--width-xlarge);
      margin-left: auto;
      margin-right: auto;
    }
  }

  & > div {
    & > .headline-title, .headline-richtext-title {
      margin-bottom: var(--spacing-l);

      * {
        margin: 0;
      }

      h1,
      h2,
      h3,
      h4,
      h5,
      h6 {
        font-weight: var(--font-weight-700);
      }
    }

    & > .slider-items {
      overflow: hidden;
      display: flex;
      opacity: 0;
    }
  }

  [data-action="start"],
  [data-action="stop"] {
    display: none;
  }

  .tns-nav {
    display: flex;
    align-items: center;
    justify-content: center;
    flex-wrap: wrap;

    button {
      padding: 0;
      border: 0;
      outline: 0;
      font-size: 0;
      width: var(--carousel-nav-size);
      height: var(--carousel-nav-size);
      border-radius: 50%;
      background-color: var(--color-neutral-740);
      margin: var(--spacing-2xs);

      &.tns-nav-active {
        background-color: var(--text-color);
      }
    }
  }

  .tns-controls {
    button {
      display: flex;
      align-items: center;
      justify-content: center;
      background: none;
      margin: 0;
      padding: 0;
      border: 0;
      outline: 0;
      font-size: 0;

      &::before {
        display: flex;
        align-items: center;
        justify-content: center;
        content: '';
        width: var(--carousel-controls-size);
        height: var(--carousel-controls-size);
        background-size: contain;
      }

      &[data-controls="prev"] {
        &::before {
          background-image: url('../../icons/chevron-left.svg');
        }
      }

      &[data-controls="next"] {
        right: 0;

        &::before {
          background-image: url('../../icons/chevron-right.svg');
        }
      }
    }

    &:has(.slider-count) {
      display: flex;
      gap: var(--spacing-big);

      button {
        &::before {
          filter: invert(61%) sepia(3%) saturate(23%) hue-rotate(4deg) brightness(94%) contrast(94%) drop-shadow(1px 0 0 var(--color-neutral-620));
        }

        &:disabled {
          opacity: 0;
        }
      }
    }

    .slider-count {
      display: flex;
      align-items: stretch;
      gap: var(--spacing-small);

      span {
        display: block;
      }

      .slider-count-current {
        align-self: flex-start;
        font-weight: var(--font-weight-800);
      }

      .slider-count-slash {
        height: 22px;
        border-left: 1px solid var(--text-color);
        transform: rotate(30deg);
      }

      .slider-count-total {
        align-self: flex-end;
      }
    }
  }

  .tns-ovh {
    transition: all .2s linear;
  }

  &.all-items-in-visible-scope {
    .tns-ovh {
      min-width: initial;
    }

    .slider-items {
      justify-content: center;
    }

    .tns-controls {
      display: none !important;
    }
  }
  
  &.is-last-item-visible {
    button[data-controls="next"] {
      opacity: 0;
      pointer-events: none;
    }
  }

  &.is-editor {
    .slider-items {
      overflow: visible;
      display: flex;
      flex-wrap: wrap;
      opacity: 1;
      justify-content: center;
    }

    .inner-block {
      & > div {
        width: 100%;
      }
    }
  }
}