/*
 * Gebruik zoveel mogelijk nested CSS
 * Meer informatie: https://www.w3schools.com/cssref/sel_nesting.php
 */

 #aw-leesmeer-txt {
  max-height: 300px;
  overflow: hidden;
  transition: max-height 0.4s ease;
	-webkit-mask-image: -webkit-gradient(linear, left top, left bottom, from(#000), to(rgba(0, 0, 0, 0)));
    -webkit-mask-image: linear-gradient(to bottom, #000 0, rgba(0, 0, 0, 0) 100%);
    mask-image: -webkit-gradient(linear, left top, left bottom, from(#000), to(rgba(0, 0, 0, 0)));
    mask-image: linear-gradient(to bottom, #000 0, rgba(0, 0, 0, 0) 100%);

  &.open {
    max-height: none; /* genoeg ruimte voor alles */
	mask-image: none;
	-webkit-mask-image: none;
	  
  }
}

.aw-toggle-leesmeer {
  cursor: pointer;
  transition: opacity 0.2s ease;
	color: #fff;
    background-color: #000;
    border-color: #000;
    font-weight: 400;
    border-radius: 4px;
    border: 1px solid transparent;
    padding: 6px 12px;
	

  &:hover {
    background: #fff;
	color: #000;
	border-color: #000;
  }
	/* 	Als je een button gebruikt gaat de kleur niet altijd direct mee, vandaar deze extra span */
  span{
	  color: var(--awcf-read-more-color) !important; 
  }
}