// remove this. just needed for this demo
body {
  padding: 3em 1em;
  max-width: 1200px;
  margin-left: auto;
  margin-right: auto;
}

/* Social Feed */
$betterembed-content-margin: 15px;
$betterembed-color-primary: #4c5559;
$betterembedShowOriginalSize: 30px;

// set to "inherit" if it should adopt your base Font.
$betterembedFontFamily: -apple-system, BlinkMacSystemFont, "Segoe UI", "Roboto", "Oxygen", "Ubuntu", "Cantarell", "Fira Sans", "Droid Sans", "Helvetica Neue", sans-serif;


/* breaks Words when they are too long and would burst the layout. */
@mixin word-wrap() {
  /* Non standard for webkit */
  word-break: break-word;
  -webkit-hyphens: auto;
  -moz-hyphens: auto;
  -ms-hyphens: auto;
  hyphens: auto;
}

@mixin ellipsis() {
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
}

@mixin text-invisible() {
  text-indent: -9999em;
}

// Hide elements visually, but keep them available for screen-readers.
//
// Used for information required for screen-reader users to understand and use
// the site where visual display is undesirable. Information provided in this
// manner should be kept concise, to avoid unnecessary burden on the user.
// "!important" is used to prevent unintentional overrides.
@mixin element-invisible() {
  position: absolute !important;
  left: 0;
  top: 0;
  clip: rect(1px 1px 1px 1px); /* IE6, IE7 */
  clip: rect(1px, 1px, 1px, 1px);
  overflow: hidden;
  height: 1px;
}

.betterembed {
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  font-family: $betterembedFontFamily;
  font-weight: 300;
  box-sizing: border-box;
  position: relative; //for iframe switcher
  // we define a max width and align it centered as a default.
  max-width: 550px;
  margin-left: auto;
  margin-right: auto;

  &.is-betterembed-msg-visible {
    .betterembed {
      &__msg {
        display: block;
      }
      &__show-original-element {
        background-position: center right;
      }
    }
  }
  &.is-betterembed-remote-visible {
    & .betterembed__embed {
      display: block;
    }
    & .betterembed__item {
      display: none;
    }
  }

  &__show-original-element {
    position: absolute;
    top: 0;
    right: 0;
    z-index: 1;
    cursor: pointer;
    background-image: url("https://s3-us-west-2.amazonaws.com/s.cdpn.io/310306/betterembed-logo.png");
    background-repeat: none;
    background-position: center right;
    background-size: 23px 23px;
    background-repeat: no-repeat;
    height: $betterembedShowOriginalSize;
    //width: $betterembedShowOriginalSize;
    padding-right: $betterembedShowOriginalSize;
    display: block;
    background-color: transparent;
    border: none;
    &:focus {
      outline: none;
    }
  }

  &__item {
    overflow: hidden; // prevent overflowing if unexpected things happening
  }
  &__network {
    @include word-wrap();
    padding-right: $betterembedShowOriginalSize; //for show iframe element
    margin: 0 0 10px 0;
    flex-grow: 1;
    text-transform: uppercase;
    font-weight: bold;
    color: $betterembed-color-primary;
  }
  &__media {
    margin:0;
    img {
      width: 100%;
      height: auto;
    }
  }
  &__title {
    clear: both;
    padding: 0 $betterembed-content-margin;
    margin: $betterembed-content-margin 0 0 0;
    @include word-wrap;
    font-size: 22px;
  }
  &__text {
    clear: both;
    padding: $betterembed-content-margin;
    @include word-wrap;
    font-size: 18px;
    a {
      color: #fff;
      font-weight: inherit; /* could be removed */
      text-decoration: underline;
    }
  }
  &__read-more {
    color: #fff;
    font-size: 14px;
    white-space: nowrap;
  }
  &__body {
    background: $betterembed-color-primary;
    color: #fff;
    font-size: 20px;
    position: relative;
  }
  &__msg {
    display: none;
    font-size: 16px;
    position: absolute;
    padding: 20px;
    top: 15px;
    left: 15px;
    right: 15px;
    background-color: rgba(0, 0, 0, 0.84);
    color: white;
    text-align: center;
    p {
      text-align: left;
      margin: 0;
      &:not(last-of-type) {
        padding-bottom: 10px;
      }
    }
    strong {
      font-weight: 600;
    }
    &-button-primary {
      display: inline-flex;
      margin-top: 20px;
      background-color: white;
      padding: 10px 20px;
      color: black;
    }
    &-button-secondary {
      display: inline-flex;
      margin-top: 20px;
      padding: 10px 20px;
      color: white;
    }
  }
  &__footer {
    margin: 0 $betterembed-content-margin;
    padding: $betterembed-content-margin 0;
    border-top: 1px solid #fff;
    font-size: 16px;
    overflow: auto;
  }
  &__author {
    a {
      color: #fff;
      font-weight: bold;
      text-decoration: none;
      &:hover {
        text-decoration: underline;
      }
    }
  }
  // the original embed or iframe content
  &__embed {
    //needed for e.g. Twitter Markup and that the show/hide icon is not inside of the component.
    display: none;
    padding-top: $betterembedShowOriginalSize;
    > * {
      //some adoptions to make iframes more responsive
      //e.g. for twitter embed if it is under 250px
      width: 100% !important;
    overflow-x: none;
            margin: 0;
      padding: 0;
    }
    & * {

    }
  }
}

//hacks for making some embedded services responsive
//todo: check if it still works :)
.betterembed__embed {
  //e.g. for facebook
  > iframe {
    width: 100%;
  }
}