@use "../variables" as vars;
@use "../functions" as func;
@use "../mixins" as mixins;

.details{
  display: block;
  margin-bottom: func.units(6);

  .details-summary::marker, .details-summary::-webkit-details-marker {
    display: none;
  }

  &[open] {
    .details-summary {
      margin-bottom: func.units(3);
      &::before {
        background-image: url(vars.$icons-folder-path + 'arrow-drop-down.svg');
        background-position: -1rem -0.8rem;
      }
    }
  }

  .details-summary {
    display: inline-block;
    position: relative;
    cursor: pointer;
    text-decoration: underline;

    &::before {
      content: "";
      display: inline-block;
      @include mixins.add-background-svg('arrow-right');
      background-position: -1.4rem -0.8rem;
      background-size: 3.4rem;
      width: func.units(4, 'rem');
      height: func.units(4, 'rem');
      margin-right: func.units(2);
    }

    &:focus{
      @include mixins.focus;
    }
    .details-summary-text {
      text-decoration: underline;
    }
  }

  .details-text {
    padding: func.units(4);
    border-left: vars.$details-panel-border-width solid func.color(vars.$details-panel-border-color);
    box-sizing: border-box;
    &[aria-hidden="true"]{
      display: none;
    }
    p{
      margin-top: 0;
      margin-bottom: func.units(4, 'rem');
    }

    & > :last-child{
      margin-bottom: 0;
    }
  }
}