@charset "UTF-8";

// Force background-position:fixed on mobile devices because of buggy behaviour
body.is-mobile .pw-widget {
  background-attachment: scroll !important;
}


// All widgets are block elements currently
// Needed for inline tags which are set to widgets
.pw-widget {
  display: block;
}


.pw-container,
.pw-navigation {

  // Prevent parent/child margin collapsing — too confusing concept for designers.
  // Sibling margin collapsing will still be in effect.
   &:before,
   &:after {
    content: "";
    display: table;

    // Pseudo-elements are part of flexbox flow, but they create bizzare 1px width.
    -webkit-flex-basis: 0;
    flex-basis: 0;
    -webkit-order: 9999;
    order: 9999;
  }

   &:after {
    // Stretch height to fit floated children
    clear: both;
  }
}


// Navigation widget when closed should not show navigation items
.pw-navigation > .pw-widget.pw-container {
  overflow: hidden;
}


.pw-link {
  text-decoration: none;
  cursor: default;

   &[href] {
    cursor: pointer;
  }

   &[href],
   &[href]:active,
   &[href]:focus {
    outline: none;
  }

  // Links which function as submit buttons for forms
   &.pw-linktype-submit,
   &.pw-linktype-submit * {
    // Buttons normally have just the normal arrow cursor
    cursor: default;
  }

   &.pw-popup-anchor-self {
    cursor: zoom-in;
  }
}


.pw-text {
  i, em {
    font-style: italic;
  }

  u {
    text-decoration: underline;
  }

  del, s, strike {
    text-decoration: line-through;
  }

  b, strong {
    font-weight: bold;
  }

  // Override any margins of first and last elements

  > :first-child {
    margin-top: 0 !important;
  }

  > :last-child {
    margin-bottom: 0 !important;
  }
}

.pw-widget.pw-richtext {
  // Reset Typography pane style properties to avoid inheritance to P, H1, etc from widget classes (WEAVER >= 1.6)

  font-family: inherit;
  font-size: inherit;
  font-weight: inherit;
  font-style: inherit;
  letter-spacing: inherit;
  text-align: inherit;
  text-decoration: inherit;
  line-height: inherit;
  color: inherit;
}


.pw-tag-highlight-p > .pw-text > p,
.pw-tag-highlight-h1 > .pw-text > h1,
.pw-tag-highlight-h2 > .pw-text > h2,
.pw-tag-highlight-h3 > .pw-text > h3,
.pw-tag-highlight-h4 > .pw-text > h4,
.pw-tag-highlight-h5 > .pw-text > h5,
.pw-tag-highlight-h6 > .pw-text > h6,
.pw-tag-highlight-blockquote > .pw-text > blockquote {
  outline: 9px solid fade-out(#00CB67, .5);
  outline-offset: -10px;

  -webkit-animation: tag-highlight 2.5s ease forwards;
  animation: tag-highlight 2.5s ease forwards;
}

@-webkit-keyframes tag-highlight {
  100% {
    outline-color: fade-out(#00CB67, 1);
  }
}
@keyframes tag-highlight {
  100% {
    outline-color: fade-out(#00CB67, 1);
  }
}



.pw-img {
  // Needed to remove 1 line height line on bottom of widget
  // Can be removed together with image widget's wrapper
  // Don't use font-size here. It will cause widgets min-height to dissapear in backend
  // because min-height is defined in em's
  line-height: 0;

  img {
    width: 100%;
    max-width: 100%;
  }
}

// Need to prevent svg element to show up before real sizes are applied (this style is updated via svg update command)
.pw-svg {
  svg {
    width: 100%;
    max-width: 100%;
    height: 100%;
  }
}

.pw-svg-inner {
  position: relative;

  svg {
    position: absolute;
    display: block;
  }
}

// Grid widget
.pw-grid {
  > .pw-widget {
    float: left;
  }

   &:after {
    // Stretch height to fit floated children
    content: "";
    display: table;
    clear: both;
  }
}

// Video widget aspect ratio 'hack'
.pw-video-inner {
  position: relative;

  iframe {
    position: absolute;
    width:    100%;
    height:   100%;
  }

  p {
    display: none;
  }
}


// Form input
.pw-input {
  border: none !important;
  background: none !important;
  padding: 0 !important;
  font-size: inherit !important;
  font-family: inherit !important;
  line-height: inherit !important;
  font-weight: inherit !important;
  color: inherit !important;
  text-decoration: inherit !important;

  > input {
    display: block !important;
    margin: 0 !important;
    width: 100%;
    height: 100%;

     &::-webkit-input-placeholder {
      color: inherit;
      opacity: 0.5;
    }

     &::-moz-placeholder {
      color: inherit;
      opacity: 0.5;
    }

     &:-ms-input-placeholder {
      color: inherit;
      opacity: 0.5;
    }

     &::placeholder {
      color: inherit;
      opacity: 0.5;
    }
  }
}

// ajax form submit success popup
.pw-form {
  .pw-success-form-submit {
    display: none;
  }
}

.pw-success-form-submit {
  background-color: #fff;
  border-radius: $panelInputRadius;
  margin: 0 auto;
  max-width: 400px;
  padding: 2em;
  position: relative;
  text-align: center;

  h6 {
    margin: .25em 0 .5em;
  }
}


.pw-navigation {
  @include user-select(unquote("none"));
}


.pw_hover-animation {
  transition-duration: 0.2s;
  transition-property: background, color, border-radius;
  transition-timing-function: ease-in-out;
}


@import "widget-hover";
@import "widgets/slideshow";