@use "../../variables/units";
@use "../../variables/colors";
@use "../../variables/zindex";
@use "description.variables" as description-variables;

@mixin root($content-selector) {
  border-block-end: 2px dotted description-variables.$border-color;

  &,
  &:visited,
  &:active,
  &:focus {
    color: colors.$grijs-90 !important;
    text-decoration: none !important;
  }

  &:hover {
    border-block-end-style: solid;
    text-decoration: none;
  }

  &.dso-open {
    position: relative;

    &::before {
      border-color: colors.$wit transparent transparent;
      border-style: solid;
      border-width: units.$u1 - 1 units.$u1 - 1 0;
      inset-block-end: units.$u2 * -1 + 2;
      content: "";
      block-size: 0;
      inset-inline-start: 50%;
      margin-inline-start: units.$u1 * -1 + 1px;
      position: absolute;
      inline-size: 0;
      z-index: zindex.$description-open + 1;
    }

    &::after {
      border-color: description-variables.$border-color transparent transparent;
      border-style: solid;
      border-width: units.$u1 units.$u1 0;
      inset-block-end: units.$u2 * -1;
      content: "";
      block-size: 0;
      inset-inline-start: 50%;
      margin-inline-start: units.$u1 * -1;
      position: absolute;
      inline-size: 0;
      z-index: zindex.$description-open;
    }

    & + #{$content-selector} {
      display: block;
    }
  }

  &:not(.dso-open) + #{$content-selector} {
    display: none;
  }

  & + #{$content-selector} {
    background-color: description-variables.$background-color;
    border: 1px description-variables.$border-color solid;
    margin-block: units.$u1 * 0.5 0;
    margin-inline: 0;
    padding-block: units.$u1;
    padding-inline: units.$u4 units.$u1;
    position: relative;

    > a {
      display: block;
      block-size: 24px;
      position: absolute;
      inset-inline-end: 0;
      text-align: center;
      inset-block-start: 0;
      inline-size: 24px;
    }
  }
}