/* *****************************************************************************
*
*  Button label
*
* ***************************************************************************** */

.btn-collapse-arrow-half-circle {
  @extend .position-absolute--top;
  @extend .border-0;
  @include media-scale(transform, translate(-50%, -40%), translate(-50%,-35%));
  @include media-scale(width, 3.5rem, 3.5rem);
  @include media-scale(height, 3.5rem, 4rem);
  background-size: contain;
  z-index: 20;
  padding: 0!important;
  background: none;

  &[aria-expanded="true"]{
    &:before {opacity: 0;}
    &:after {opacity: 1}
  }

  &[aria-expanded="false"]{
    &:before {opacity: 1;}
    &:after {opacity: 0}
  }

  &:before,
  &:after {
    @include size(100%);
    @include transitions(opacity);
    content:"";
    position: absolute;
    left: 0;
    top: 0;
    background-size: contain;
    background-position: center top;
    background-repeat: no-repeat;
  }

  &:before {
    background-image: url('/images/icons/svg-atoms/collapse-trigger--arrow-up.svg');
  }

  &:after {
    background-image: url('/images/icons/svg-atoms/collapse-trigger--arrow-down.svg');
  }
}