.progressive-disclosure {
	background: var(--background-grey);
	border: 1px solid var(--border-grey);
	border-radius: var(--border-radius);
	padding: 0 1rem;

	&:hover {
		&:not(.is-open) {
			filter: brightness(0.9);
			transition: 0.1s;
		}
		.pd-toggle {
			h4 {
				color: black;
			}
		}
	}

	.pd-toggle {
	  display: flex;
	  align-items: center;
	  justify-content: space-between;
	  width: 100%;
	  padding: 0;
	  background: none;
	  border: 0;
	  cursor: pointer;
  	text-align: left;	
  	padding: 1rem 0;

  	h4 {
  		margin: 0;
  		font-size: 0.9rem;
	    font-weight: normal;
	    color: grey;
	    text-align: left;
	    text-transform: uppercase;
  	}

  	.pd-icon::before {
	  	content: '';
		  display: inline-block;
		  width: 0.6em;
		  height: 0.6em;
		  border-right: 2px solid currentColor;
		  border-bottom: 2px solid currentColor;
		  margin-right: 0.5rem;
		  margin-bottom: 0.15rem;
		  transform: rotate(45deg);
		  transition: transform 0.25s ease;
		  &:hover {
		  	color: black;
		  }
  	}
	}

	&.is-open {
		.pd-icon::before {
	  	transform: rotate(-135deg); 	
		}
		.pd-content {
			max-height: var(--pd-expanded-height, 1000px);
    	border-top: 1px solid var(--border-grey);
		  //-webkit-mask-image: none;
		  //        mask-image: none;

		}
	}

	.pd-content {
		opacity: 0.9;
		--pd-collapsed-height: 0; 
	  max-height: var(--pd-collapsed-height);
	  overflow: hidden;
	  transition: max-height 0.3s ease;
	  //-webkit-mask-image: linear-gradient(to bottom, #000 40%, transparent 100%);
	  //        mask-image: linear-gradient(to bottom, #000 40%, transparent 100%);
	}
}