@use "sass:map" as sass-map;
@use "../../../styles/tools/convert";
@use "../../../styles/tools/generate";
@use "../../../styles/tokens/space";
@use "../../../styles/tokens/breakpoint";

@mixin base {
  color: var(--color-text-default);
  background-color: var(--color-fill-subtle);
  border-color: var(--color-fill-disabled);
  margin-left: 0 !important;
  margin-right: 0 !important;
}

@mixin accordion {
  padding-left: 0 !important;
  padding-right: 0 !important;

  .accordion {
    margin: convert.to-rem(87px) space.get("xlarge");

    @include breakpoint.get("md", "down") {
      margin: space.get("xlarge") space.get("large");
    }

    @include breakpoint.get("sm", "down") {
      margin: 0;
    }
  }
}

@mixin preview {
  display: flex;
  padding: 0px !important;

  .img {
    margin-bottom: 0px;
    width: 100%;
  }

  img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: left center;
    margin: 0px !important;
  }
}

@mixin content() {
  margin-bottom: space.get("large");

  *:last-child {
    margin-bottom: 0;
  }
}

@mixin item() {
  border-top: 1px solid var(--color-fill-disabled);

  &:first-child {
    border-top: none;
  }

  &:last-child {
    border-bottom: none;
  }

  &.is-active {
    border-top: 4px solid var(--color-border-accent);
  }

  .accordion__body {
    margin-bottom: 0;
  }

  @include breakpoint.get("sm", "down") {
    .accordion__header,
    .feature-accordion__content {
      padding-left: convert.to-rem(15px);
      padding-right: convert.to-rem(15px);
    }
  }
}
