18F/calc

// The expandable area component is a progressively enhanced, accordion-like component.
// Read more: https://calc-dev.app.cloud.gov/styleguide/#expandable-area

@import '../base/variables';

@keyframes expandable-area-fade-in {
  from {
    opacity: 0;
  }

  to {
    opacity: 1;
  }
}

@media screen {
  expandable-area > *[role="button"] {
    cursor: pointer;
    color: $color-blue;
    text-decoration: underline;

    &[aria-expanded="false"] {
      &:before {
        content: '\25B6';
        font-size: $medium-font-size;
        padding-right: 4px;
        display: inline-block;
      }

      ~ * {
        display: none;
      }
    }

    &[aria-expanded="true"] {
      &:before {
        content: '\25BC';
        font-size: $medium-font-size;
        padding-right: 4px;
        display: inline-block;
      }

      ~ * {
        animation-duration: 1s;
        animation-name: expandable-area-fade-in;
      }
    }
  }
}