@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 + 'chevron-up.svg');
      }
    }
  }

  .details-summary {
    display: inline-block;
    position: relative;
    cursor: pointer;
    text-decoration: underline;
    max-width: 100%;
    overflow-wrap: break-word;

    &::before {
      content: "";
      display: inline-block;
      @include mixins.add-background-svg('chevron-down');
      width: func.units(5, 'rem');
      min-width: func.units(5, 'rem');
      height: func.units(5, 'rem');
      margin-right: func.units(2);
      vertical-align: bottom;
    }

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

  .details-text {
    padding: func.units(4) func.units(4) func.units(4) calc(1.2rem + (vars.$details-panel-border-width / 2)); // top | right | bottom | left
    margin-left: calc(1.2rem - (vars.$details-panel-border-width / 2));
    border-left: vars.$details-panel-border-width solid func.color(vars.$details-panel-border-color);
    box-sizing: border-box;
    overflow-wrap: break-word;
    &[aria-hidden="true"]{
      display: none;
    }
    p{
      margin-top: 0;
      margin-bottom: func.units(4, 'rem');
    }

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