/* Main */

.srfc-page-body {
  margin: 0;
}

.srfc-page-body.srfc-active {
  overflow: hidden;
}

.srfc-page-container {
  max-height: 100vh;
  overflow: auto;
}


/* Containter */

.srfc-container {
  position: fixed;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  visibility: hidden;
  background-color: transparent;
}

.srfc-container.srfc-active {
  visibility: visible;
}


/* Backdrop */

.srfc-backdrop-100.srfc-active {
  background-color: rgba(0, 0, 0, .5);
}

.srfc-backdrop-200.srfc-active {
  background-color: rgba(0, 0, 0, .75);
}

.srfc-backdrop-300.srfc-active {
  background-color: rgba(0, 0, 0, .9);
}

.srfc-backdrop-400.srfc-active {
  background-color: rgba(0, 0, 0, 1);
}


/* Modal */

.srfc {
  position: fixed;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  display: flex;
  align-items: center;
  visibility: hidden;
}


.srfc.srfc-active {
  visibility: visible;
}


/* Position and Size */

.srfc-padded {
  top: 48px;
  right: 48px;
  bottom: 48px;
  left: 48px;
}

.srfc-padded-left {
  left: 48px;
}

.srfc-padded-right {
  right: 48px;
}

.srfc-padded-top {
  top: 48px;
}

.srfc-padded-bottom {
  bottom: 48px;
}


.srfc-wrap {
  display: flex;
  flex-direction: column;
  max-width: 100%;
  max-height: 100%;
  margin-right: auto;
  margin-left: auto;
  overflow-y: auto; /* ie fix */
}

.srfc-out-of-wrap {
  z-index: 2;
}


.srfc-snap-left {
  position: absolute;
  top: 0;
  bottom: 0;
  left: 0;
}

.srfc-snap-right {
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
}

.srfc-snap-top {
  position: absolute;
  top: 0;
  right: 0;
  left: 0;
}

.srfc-snap-bottom {
  position: absolute;
  right: 0;
  bottom: 0;
  left: 0;
}

.srfc-snap-all {
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
}


.srfc-width-small {
  width: 300px;
}

.srfc-width-medium {
  width: 600px;
}

.srfc-width-large {
  width: 900px;
}

.srfc-width-xlarge {
  width: 1200px;
}


/* Content */

.srfc-body {
  overflow-y: auto;
}

.srfc-body-expand {
  position: relative;
  flex: 1;
}

.srfc-header {
  display: flex;
}

.srfc-header-content {
  flex: 1;
}

.srfc-title {
  margin: 0;
}

.srfc-p {
  padding: 16px;
}

.srfc-p-x {
  padding-right: 16px;
  padding-left: 16px;
}

.srfc-p-t {
  padding-top: 16px;
}

.srfc-p-b {
  padding-bottom: 16px;
}

/* Theme */

.srfc-theme-default {
  background-color: #fff;
}

.srfc-theme-on-dark {
  color: #fff;
}


/* Controls */

/*
<svg width="14" height="14" viewBox="0 0 14 14" fill="none" xmlns="http://www.w3.org/2000/svg">
<path d="M1 13L7 7M13 1L7 7M7 7L1 1M7 7L13 13" stroke="black" stroke-width="2"/>
</svg>
*/
.srfc-header-x {
  width: 36px;
  height: 36px;
  padding: 0;
  background: none;
  background-image: url("data:image/svg+xml; charset=utf8, %3Csvg%20width%3D%2214%22%20height%3D%2214%22%20viewBox%3D%220%200%2014%2014%22%20fill%3D%22none%22%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%3E%0A%3Cpath%20d%3D%22M1%2013L7%207M13%201L7%207M7%207L1%201M7%207L13%2013%22%20stroke%3D%22black%22%20stroke-width%3D%222%22%2F%3E%0A%3C%2Fsvg%3E%0A");
  background-repeat: no-repeat;
  background-position: center;
  border: none;
  opacity: .7;
}

.srfc-header-x:hover {
  background-color: rgba(0, 0, 0, .05);
  opacity: 1;
}

.srfc-header > .srfc-header-x {
  margin-top: -8px;
  margin-right: -8px;
  margin-bottom: -8px;
}

.srfc-x,
.srfc-next,
.srfc-prev {
  position: fixed;
  z-index: 2;
  padding: 0;
  background: none;
  background-color: rgba(0, 0, 0, .1);
  background-repeat: no-repeat;
  background-position: center;
  border: none;
  opacity: .8;
}

.srfc-x:hover:enabled,
.srfc-next:hover:enabled,
.srfc-prev:hover:enabled  {
  background-color: rgba(0, 0, 0, .15);
  opacity: 1;
}

.srfc-prev:disabled,
.srfc-next:disabled {
  opacity: .3;
}

/*
<svg width="16" height="16" viewBox="0 0 16 16" fill="none" xmlns="http://www.w3.org/2000/svg">
<path d="M1 15L8 8M15 1L8 8M8 8L1 1M8 8L15 15" stroke="white" stroke-width="2"/>
</svg>
*/
.srfc-x {
  top: 0;
  right: 0;
  width: 48px;
  height: 48px;
  background-image: url("data:image/svg+xml; charset=utf8, %3Csvg%20width%3D%2216%22%20height%3D%2216%22%20viewBox%3D%220%200%2016%2016%22%20fill%3D%22none%22%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%3E%0A%3Cpath%20d%3D%22M1%2015L8%208M15%201L8%208M8%208L1%201M8%208L15%2015%22%20stroke%3D%22white%22%20stroke-width%3D%222%22%2F%3E%0A%3C%2Fsvg%3E");
}

/*
<svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
<path d="M7 23L17.5 11.5L7 1" stroke="white" stroke-width="2"/>
</svg>
*/
.srfc-next {
  top: 50%;
  right: 0;
  width: 48px;
  height: 80px;
  margin-top: -40px;
  background-image: url("data:image/svg+xml; charset=utf8, %3Csvg%20width%3D%2224%22%20height%3D%2224%22%20viewBox%3D%220%200%2024%2024%22%20fill%3D%22none%22%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%3E%0A%3Cpath%20d%3D%22M7%2023L17.5%2011.5L7%201%22%20stroke%3D%22white%22%20stroke-width%3D%222%22%2F%3E%0A%3C%2Fsvg%3E");
}

/*
<svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
<path d="M17.5 23L7 11.5L17.5 1" stroke="white" stroke-width="2"/>
</svg>
*/
.srfc-prev {
  top: 50%;
  width: 48px;
  height: 80px;
  margin-top: -40px;
  background-image: url("data:image/svg+xml; charset=utf8, %3Csvg%20width%3D%2224%22%20height%3D%2224%22%20viewBox%3D%220%200%2024%2024%22%20fill%3D%22none%22%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%3E%0A%3Cpath%20d%3D%22M17.5%2023L7%2011.5L17.5%201%22%20stroke%3D%22white%22%20stroke-width%3D%222%22%2F%3E%0A%3C%2Fsvg%3E");
}


/* Animations */

@media (prefers-reduced-motion: no-preference) {
  .srfc-container {
    transition: visibility 120ms, background-color 120ms;
  }
  .srfc-scale-fade {
    opacity: 0;
    transition: transform 120ms, opacity 120ms, visibility 120ms;
    transform: scale(.98);
  }
  .srfc.srfc-active .srfc-scale-fade {
    opacity: 1;
    transform: scale(1);
  }

  .srfc-fade {
    opacity: 0;
    transition: opacity 120ms, visibility 120ms;
  }
  .srfc.srfc-active .srfc-fade {
    opacity: 1;
  }

  .srfc-slide-left {
    opacity: 0;
    transition: transform 240ms, opacity 240ms, visibility 240ms;
    transform: translate3d(-100%, 0, 0);
  }
  .srfc.srfc-active .srfc-slide-left {
    opacity: 1;
    transform: translate3d(0, 0, 0);
  }

  .srfc-slide-right {
    opacity: 0;
    transition: transform 240ms, opacity 240ms, visibility 240ms;
    transform: translate3d(100%, 0, 0);
  }
  .srfc.srfc-active .srfc-slide-right {
    opacity: 1;
    transform: translate3d(0, 0, 0);
  }

  .srfc-slide-bottom {
    opacity: 0;
    transition: transform 200ms, opacity 200ms, visibility 200ms;
    transform: translate3d(0, 100%, 0);
  }
  .srfc.srfc-active .srfc-slide-bottom {
    opacity: 1;
    transform: translate3d(0, 0, 0);
  }

  .srfc-slide-top {
    opacity: 0;
    transition: transform 200ms, opacity 200ms, visibility 200ms;
    transform: translate3d(0, -100%, 0);
  }
  .srfc.srfc-active .srfc-slide-top {
    opacity: 1;
    transform: translate3d(0, 0, 0);
  }
}


/* Media */

.srfc-image {
  position: absolute;
  top: 50%;
  left: 50%;
  width: auto;
  max-width: 100%;
  height: auto;
  max-height: 100%;
  transform: translate(-50%, -50%);
}

.srfc-embed-expand {
  width: 100%;
  height: 100%;
}

.srfc-embed-expand iframe {
  width: 100%;
  height: 100%;
}

.srfc-embed-fit {
  position: absolute;
  display: flex;
  flex-direction: column;
  justify-content: center;
  width: 100%;
  height: 100%;
}

.srfc-embed-fit iframe {
  margin-right: auto;
  margin-left: auto;
}


/* Utils */

.srfc-pass,
.srfc-embed-fit,
.srfc {
  /* stylelint-disable-next-line declaration-no-important */
  pointer-events: none !important;
}

.srfc-pass > *,
.srfc > *,
.srfc-embed-fit > * {
  pointer-events: initial;
}