.d-recipe-attachment-carousel {
  position: relative;
  width: var(--dt-space-1000);
  max-height: 100px; /* stylelint-disable-line meowtec/no-px */
}

.d-recipe-attachment-carousel__media-list {
  display: flex;
  flex-direction: row;
  padding-left: 0;
  overflow-x: scroll;
}

.d-recipe-attachment-carousel__media-list::-webkit-scrollbar {
  display: none;
}

.d-recipe-attachment-carousel__arrow {
  position: absolute;
  top: var(--dt-space-30-percent);
  color: var(--dt-color-foreground-tertiary-inverted);
  background-color: var(--dt-color-surface-strong);
  border: var(--dt-space-100) solid;
  border-color: var(--dt-color-border-moderate-inverted);
  border-width: var(--dt-size-100);
  opacity: 0;

  &:hover {
    color: var(--dt-color-foreground-primary-inverted);
  }
}

.d-recipe-attachment-carousel:hover .d-recipe-attachment-carousel__arrow {
  opacity: 1;
}

.d-recipe-attachment-carousel__arrow--left {
  left: var(--dt-space-300);
}

.d-recipe-attachment-carousel__arrow--right {
  right: var(--dt-space-300);
}

.d-recipe-attachment-carousel__image {
  position: relative;
}

.d-recipe-attachment-carousel__image-close-button {
  position: absolute;
  top: inherit;
  right: inherit;
  color: var(--dt-color-foreground-tertiary-inverted);
  background-color: var(--dt-color-surface-strong);
  opacity: 0;

  &:hover {
    color: var(--dt-color-foreground-primary-inverted);
  }
}

.d-recipe-attachment-carousel__image:focus-within .d-recipe-attachment-carousel__image-close-button, .d-recipe-attachment-carousel__image:hover .d-recipe-attachment-carousel__image-close-button {
  opacity: 1;
}

.d-recipe-attachment-carousel__image-viewer {
  width: var(--dt-size-700);
  height: var(--dt-size-700);
  object-fit: cover;
  border: var(--dt-space-100) solid;
  border-color: var(--dt-color-border-subtle);
  border-width: var(--dt-size-350);
  border-radius: var(--br4);
}

.d-recipe-attachment-carousel__image-top-right {
  position: absolute;
  top: var(--dt-size-100);
  right: var(--dt-size-100);
}

.d-recipe-attachment-carousel__image-progress-bar {
  position: absolute;
  top: inherit;
  right: inherit;
  display: flex;
  padding: var(--dt-space-300);
  background-color: var(--dt-color-surface-moderate);
  border-radius: var(--dt-size-radius-circle);
}