@use "../../../styles/tools/convert";
@use "../../../styles/tokens/space";
@use "../../../styles/tokens/breakpoint";

$preview-width: convert.to-rem(640px);
$preview-height: convert.to-rem(480px);

@mixin desktop-layout {
  @include breakpoint.get("xl") {
    display: flex;
    align-items: flex-start;
    min-height: $preview-height;
  }
}

@mixin base {
  color: var(--color-text-default);
  background-color: var(--color-background-secondary);
  width: 100%;
  @include desktop-layout();
}

@mixin accordion {
  width: 100%;

  @include breakpoint.get("xl") {
    flex: 1 1 0;
    min-width: 0;
    min-height: $preview-height;
    display: flex;
    flex-direction: column;
    justify-content: center;
    padding: convert.to-rem(40px) convert.to-rem(60px);
  }

  .accordion {
    width: 100%;
    margin: 0;
  }
}

@mixin preview {
  display: block;
  justify-content: center;
  overflow: hidden;
  width: 100%;

  @include breakpoint.get("xl") {
    display: flex;
    flex: 0 0 $preview-width;
    width: $preview-width;
    align-self: flex-start;
  }

  @include breakpoint.get("xl") {
    align-items: stretch;
  }

  // Image may be wrapped in a div or picture element by page-builder output.
  > * {
    display: block;
    width: 100%;
  }

  @include breakpoint.get("xl", "down") {
    display: block;
    height: auto;
  }

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

    @include breakpoint.get("xl") {
      width: 100%;
      height: auto;
    }
  }

  img {
    display: block;
    max-width: 100%;
    width: 100%;
    object-fit: contain;
    object-position: right center;
    margin: 0 !important;

    @include breakpoint.get("xl") {
      height: auto;
    }

    @include breakpoint.get("xl", "down") {
      height: auto;
      width: 100%;
    }
  }
}

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

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

@mixin item() {
  border-bottom: none;
  border-top: 1px solid var(--color-border-strong);

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

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

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

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