/*

##############################
### ORGANISM: code-preview ###
##############################

*/

@import '../../extends';
@import '../../functions';
@import '../../mixins';
@import '../../variables';

@import '../atoms/_color.scss';
@import '../atoms/_text.scss';
@import '../atoms/_button.scss';

.#{prefix(null, 'code-preview')},
.#{organism('code-preview')} {
  position: relative;
  margin: 1rem 0;
  background: color('charade');

  &-controls {
    width: 100%;
    display: flex;
    justify-content: center;
    align-items: center;
    margin: 0 auto;
    padding: 9px 0;

    &-button {
      @include unset-button;
      position: relative;
      padding: 6px;
      cursor: pointer;
    }

    &-icon {
      width: 22px;
      height: 22px;
      fill: color('white');
      opacity: 0.6;
      transition: opacity 0.25s ease-out;
    }

    &-button:hover &-icon,
    &-button:focus &-icon {
      opacity: 1;
    }
  }

  /* inline preview above */
  &-preview {
    position: relative;
    top: 1em;
    margin: 1em;
    background: color('white');
    box-shadow: 0 2px 10px 0 rgba(0, 0, 0, 0.07);

    & + div.#{molecule('code-snippet')} {
      @media (min-height: 768px) {
        min-height: 0;
      }
    }
  }

  /* iframe preview above */
  &-preview-iframe {
    display: flex;
    justify-content: center;
    position: relative;
    margin: 0 1em;

    amp-iframe {
      @media screen and (max-width: 412px) {
        width: 240px;
        height: 427px;
      }
      @media screen and (min-width: 413px) {
        width: 320px;
        height: 569px;
      }
    }
  }

  /* top preview like playground embed mode */
  &-top-preview {
    position: relative;
    padding: 0 1em;
    z-index: 1;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: start;

    @media (min-width: 1024px) {
      padding: 0 15%;
    }

    & + div.#{molecule('code-snippet')} {
      position: relative;
      width: 100%;
      min-height: 0;
      padding: 1em 1em 0;
      margin-top: 0;
    }

    amp-iframe {
      align-self: center;
    }
  }

  /* side preview like playground embed mode */
  &-side-preview {
    width: 100%;
    height: 100%;
    position: absolute;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    padding: 0;
    margin: 0;

    @media (min-width: 768px) {
      width: auto;
      left: 60%;
      background-color: darken(color('charade'), 2%);
    }

    @media (max-width: 767px) {
      overflow: hidden;
      pointer-events: none;

      &-active {
        pointer-events: auto;
      }
    }

    &-frame {
      position: absolute;
      max-height: 100%;
      right: 15px;
      top: auto;
      background-color: white;

      @media (max-width: 767px) {
        position: static;
        background: #fff;
        pointer-events: none;
        transform: translateY(100%);
        transition: transform 0.2s cubic-bezier(0, 0, 0.3, 1);

        &.show {
          transform: translateY(0);
          pointer-events: auto;
          height: 100%;
        }
      }
    }
  }

  &-iframe {
    background: color('white');
    margin-bottom: 1em;
  }

  &.top-frame,
  &.side-frame {
    .#{molecule('code-snippet')} {
      min-height: 150px;
      max-height: 450px;
    }
  }

  &.side-frame {
    .#{molecule('code-snippet')} {
      width: 100%;
      margin: 0;
      background: none;

      @media (min-width: 768px) {
        width: 60%;
        min-height: 580px;
      }

      @media (min-width: 1024px) {
        min-height: 738px;
      }
      @media (min-width: 1280px) {
        min-height: 842px;
      }
      @media (min-width: 1441px) {
        min-height: 746px;
      }
    }
  }
}
