////////////////////////////
// !THEME / COMPONENTS / DEV
////////////////////////////


// Temp modal
.dcf-modal-overlay {
  align-items: center;
  display: flex;
  height: 100%;
  justify-content: center;
  left: 0;
  position: fixed;
  top: 0;
  transition: none;
  width: 100%;
  z-index: 100149;
}

// Modal is closed, hidden
.dcf-modal-overlay[aria-hidden=true] {
	opacity: 0;
	pointer-events: none;
	transition: opacity $timing-fade-out $easing-fade-out, visibility 0ms .4s;
	visibility: hidden;
}

// Modal is open, visible
.dcf-modal-overlay[aria-hidden=false] {
	opacity: 1;
	pointer-events: auto;
	transition: opacity $timing-fade-in $easing-fade-in;
	visibility: visible;
}


.unl-stripes::after {
  background-image: repeating-linear-gradient($diagonal1, fade-out($color-body,.5), fade-out($color-body,.5) 1px, transparent 1px, transparent 2px);
  content: '';
  flex: 1;
  height: .75em;
  margin-left: 1em;
}

.unl-ftd-person-tsr-body {
  grid-area: 2/3/3/-1;

  @include mq(sm, min, width) {
    grid-area: 1/5/2/-1;
  }

}

.unl-ftd-person-tsr-img {
  grid-area: 1/3/2/-1;

  @include mq(sm, min, width) {
    grid-area: 1/2/2/5;
  }

}



.unl-clip-l {
  clip-path: polygon(0 0, 57.7% 0, 100% 100%, 0 100%);
  shape-inside: polygon(0 0, 100% 0, 100% 100%, 42.3% 100%);
}


.unl-clip-r {
  clip-path: polygon(0 0, 100% 0, 100% 100%, 42.3% 100%);
  shape-outside: polygon(0 0, 100% 0, 100% 100%, 42.3% 100%);
//   float: right;
//   width: 42%;
//   height: 100%;
}

.unl-clip-circle {
  shape-outside: circle(50%) border-box;
  shape-margin: 1em;
}

.shape-outside::before {
  content: '';
  shape-outside: polygon(0 0, 0 200px, 200px 300px);
  width: 300px;
  height: 200px;
  float: left;
  opacity: .25;
  border: 1px solid blue;
}


.unl-bg-scarlet-stripe {
  background-image: linear-gradient($diagonal1, $white 56.25%, darken($scarlet,3%) 56.25%);
}

.unl-bg-cream-stripe {
  background-image: linear-gradient($diagonal1, $cream 56.25%, darken($cream,3%) 56.25%);
}


[class*='unl-stripe-'] {
  position: relative;

  &::after {
    content: '';
    height: 5px;
    position: absolute;
    width: 100%;
  }

}

[class*='unl-stripe-b-'] {

  &::after {
    bottom: 0;
  }

}

[class*='unl-stripe-t-'] {

  &::after {
    top: 0;
  }

}


.unl-stripe-b-white {

  &::after {
    background-image: linear-gradient(to top, transparent 2px, $white 2px, $white 5px, transparent 5px);
  }

}

.unl-stripe-b-scarlet {

  &::after {
    background-image: linear-gradient(to top, transparent 2px, $scarlet 2px, $scarlet 5px, transparent 5px);
  }

}

.unl-stripe-t-white {

  &::after {
    background-image: linear-gradient(to bottom, transparent 2px, $white 2px, $white 5px, transparent 5px);
  }

}

.unl-stripe-t-scarlet {

  &::after {
    background-image: linear-gradient(to bottom, transparent 2px, $scarlet 2px, $scarlet 5px, transparent 5px);
  }

}


.mask {
//   mask: url('../images/asfalt-dark.png'); // no
//   mask: url('../images/asfalt-light.png'); // no
//   mask: url('../images/bedge-grunge.png');
//   mask: url('../images/cardboard-flat.png'); // #3
//   mask: url('../images/clean-gray-paper.png'); // #2
//   mask: url('../images/concrete-wall-2.png');
//   mask: url('../images/dark-wall.png'); // no
//   mask: url('../images/dotnoise-light-grey.png');
//   mask: url('../images/dust.png'); // no
//   mask: url('../images/exclusive-paper.png');
//   mask: url('../images/farmer.png');
//   mask: url('../images/felt.png');
//   mask: url('../images/green-dust-and-scratches.png'); // no
//   mask: url('../images/grunge-wall.png');
//   mask: url('../images/handmade-paper.png'); // no
//   mask: url('../images/light-paper-fibers.png');
  -webkit-mask: url('../images/mocha-grunge.png'); // #1
  mask: url('../images/mocha-grunge.png'); // #1
//   mask: url('../images/mooning.png');
//   mask: url('../images/natural-paper.png');
//   mask: url('../images/noisy.png');
//   mask: url('../images/old-map.png');
}