[data-collapsible-content],
[data-collapsible-content] .metafield-rich_text_field,
[data-collapsible-content] .collapsible-text {
  > * {
    margin: 0;
  }

  > * + * {
    margin-top: 1.6rem;
  }
}

[data-collapsible-item] {
  color: var(--collapsible-inactive-text-color);
  background-color: var(--collapsible-inactive-background-color);

  &[data-collapsible-type="image"] {
    @media only screen and (max-width: 989px) {
      border-radius: 0;
      background-color: transparent;
      padding: 0;

      .collapsible-heading,
      .collapsible-wrapper {
        color: var(--collapsible-inactive-text-color);
        background-color: var(--collapsible-inactive-background-color);
        padding-inline: 1.6rem;
        transition: background-color 0.3s ease-in-out, color 0.3s ease-in-out;
      }
  
      .collapsible-heading {
        border-radius: var(--collapsible-item-border-radius);
        padding-top: 4rem;
        padding-bottom: 4rem;
      }
    }
  }
}

[data-collapsible-item][aria-current="true"] {
  @media only screen and (max-width: 989px) {
    &[data-collapsible-type="image"] {
      [data-collapsible-drawer] {
        margin-top: 0;
      }
  
      .collapsible-heading {
        border-bottom-left-radius: 0;
        border-bottom-right-radius: 0;
        padding-bottom: 0;
      }
  
      .collapsible-wrapper {
        border-bottom-left-radius: var(--collapsible-item-border-radius);
        border-bottom-right-radius: var(--collapsible-item-border-radius);
        padding-top: 1.6rem;
        padding-bottom: 4rem;
      }
    }
  }

  [data-collapsible-drawer] {
    margin-top: 1.6rem;
  }

  [mb-icon-collapse] {
    [mb-icon-rotate] {
      transform: rotate(90deg);
    }
  }
}

[data-collapsible-item]:hover,
[data-collapsible-item][aria-current="true"] {
  color: var(--collapsible-active-text-color);
  background-color: var(--collapsible-active-background-color);

  @media only screen and (max-width: 989px) {
    &[data-collapsible-type="image"] {
      background-color: transparent;
  
      .collapsible-heading,
      .collapsible-wrapper {
        color: var(--collapsible-active-text-color);
        background-color: var(--collapsible-active-background-color);
      }
    }
  }

  [mb-icon-variant="primary"] {
    path[mb-icon-bg] {
      fill: rgb(var(--color-button-primary-background-hover));
    }

    path:not([mb-icon-bg]) {
      fill: rgb(var(--color-button-primary-label-hover));
    }
  }

  [mb-icon-variant="secondary"] {
    path[mb-icon-bg] {
      fill: rgb(var(--color-button-secondary-background-hover));
    }

    path:not([mb-icon-bg]) {
      fill: rgb(var(--color-button-secondary-label-hover));
    }
  }

  [mb-icon-variant="tertiary"] {
    path[mb-icon-bg] {
      fill: rgb(var(--color-button-tertiary-background-hover));
    }

    path:not([mb-icon-bg]) {
      fill: rgb(var(--color-button-tertiary-label-hover));
    }
  }

  [mb-icon-variant="outline"] {
    path[mb-icon-bg] {
      fill: transparent;
      stroke: rgb(var(--color-button-outline-border-hover));
    }

    path:not([mb-icon-bg]) {
      fill: rgb(var(--color-button-outline-label-hover));
    }
  }
}

[mb-icon-collapse] {
  path {
    transition: fill 0.3s ease-in-out, stroke 0.3s ease-in-out;
  }

  [mb-icon-rotate] {
    transition: transform 0.2s ease-in-out;
    transform-origin: center;
  }
}

[mb-icon-variant="primary"] {
  path[mb-icon-bg] {
    fill: rgb(var(--color-button-primary-background));
  }

  path:not([mb-icon-bg]) {
    fill: rgb(var(--color-button-primary-label));
  }
}

[mb-icon-variant="secondary"] {
  path[mb-icon-bg] {
    fill: rgb(var(--color-button-secondary-background));
  }

  path:not([mb-icon-bg]) {
    fill: rgb(var(--color-button-secondary-label));
  }
}

[mb-icon-variant="tertiary"] {
  path[mb-icon-bg] {
    fill: rgb(var(--color-button-tertiary-background));
  }

  path:not([mb-icon-bg]) {
    fill: rgb(var(--color-button-tertiary-label));
  }
}

[mb-icon-variant="outline"] {
  path[mb-icon-bg] {
    fill: transparent;
    stroke: rgb(var(--color-button-outline-border));
  }

  path:not([mb-icon-bg]) {
    fill: rgb(var(--color-button-outline-label));
  }
}