@import 'components/atoms/_text.scss';
@import '../loader/loading-indicator.scss';

.fly-in {
  $headerHeight: 64px;

  position: fixed;
  z-index: 10000;
  top: 0;
  display: flex;
  flex-direction: column;
  width: 100%;
  height: 100%;
  min-width: 240px;
  overflow: hidden;
  background: color('white');
  color: color('charade');
  transition: transform .3s ease, box-shadow .2s ease-in;

  @media (min-width: 768px) {
    position: absolute;
    top: #{$headerHeight};
    width: 42%;
    max-width: 480px;
    height: calc(100% - #{$headerHeight} - 8px);
  }

  &--left {
    left: 0;
    transform: translate3d(-105%, 0, 0);
  }

  &--right {
    right: 0;
    transform: translate3d(100%, 0, 0);
  }

  &-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    height: 60px;
    padding: 0 8px 0 25px;
    border-bottom: 1px solid color('iron');
    font-family: 'Poppins',  system;

    h2 {
      margin: 0 auto 0 0;
      padding-left: 40px;
      background-repeat: no-repeat;
      background-position: left;
    }

    .fly-in-close {
      display: flex;
      justify-content: center;
      padding: 8px;
      width: 56px;
      font-size: 24px;
      user-select: none;
    }
  }

  &-content {
    height: calc(100% + 50px);
    padding: 25px;
    background: color('white');
    overflow: scroll;

    &.loading {
      @extend %loading-indicator;
    }
  }

  &--import h2 {
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='29' height='29'%3E%3Cpath fill='%2320202A' d='M24.287 4.587c-5.438-5.445-14.26-5.45-19.705-.012l1.876 1.876c4.408-4.405 11.552-4.404 15.959.003 4.406 4.407 4.406 11.552 0 15.959-4.407 4.407-11.551 4.408-15.959.002l-1.857 1.876c5.437 5.423 14.237 5.423 19.675 0 5.444-5.438 5.449-14.26.01-19.704zM13.992 7.524l-1.857 1.858 3.86 3.86H.5v2.626h15.495l-3.86 3.861 1.857 1.857 7.03-7.03-7.03-7.032z'/%3E%3C/svg%3E");
  }

  &--error h2 {
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='28' height='28'%3E%3Cpath fill='%2320202A' d='M14 0c7.732 0 14 6.268 14 14s-6.268 14-14 14S0 21.732 0 14 6.268 0 14 0zm0 2.545C7.668 2.545 2.545 7.668 2.545 14S7.668 25.455 14 25.455 25.455 20.332 25.455 14 20.332 2.545 14 2.545zm-.025 15.16c.304 0 .58.08.83.24.25.16.447.367.593.623.145.256.217.522.217.796 0 .29-.076.56-.227.812a1.7 1.7 0 01-.608.601 1.562 1.562 0 01-1.6.006 1.579 1.579 0 01-.583-.595 1.663 1.663 0 01-.212-.824 1.704 1.704 0 01.8-1.43c.243-.152.506-.228.79-.228zM14.005 7c.492 0 .884.136 1.174.408.291.273.436.708.436 1.307a3 3 0 01-.01.286l-.593 7.881h-2.068l-.548-7.881-.011-.245c0-.606.143-1.05.43-1.332.287-.283.684-.424 1.19-.424z'/%3E%3C/svg%3E");
  }

  &--state h2 {
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='35' height='22'%3E%3Cpath d='M6.696 21.204v-.234c-.696-.288-1.275-.804-1.737-1.548-.462-.744-.693-1.686-.693-2.826 0-.492.06-1.122.18-1.89a9.688 9.688 0 00.162-1.62c0-1.392-.666-2.214-1.998-2.466v-.036c.684-.132 1.188-.405 1.512-.819.324-.414.486-.969.486-1.665 0-.444-.054-.99-.162-1.638-.12-.744-.18-1.362-.18-1.854 0-1.14.231-2.082.693-2.826C5.421 1.038 6 .522 6.696.234V0h-2.88c-.3.144-.63.393-.99.747s-.681.864-.963 1.53c-.282.666-.423 1.467-.423 2.403 0 .468.06 1.086.18 1.854.108.648.162 1.2.162 1.656 0 1.116-.594 1.74-1.782 1.872v1.08c.648.06 1.107.267 1.377.621s.405.771.405 1.251c0 .456-.054 1.008-.162 1.656-.12.768-.18 1.386-.18 1.854 0 .936.141 1.737.423 2.403.282.666.603 1.176.963 1.53.36.354.69.603.99.747h2.88zm12.276-3.906V14.22h-3.186v3.078h3.186zm4.356 0V14.22h-3.186v3.078h3.186zm-8.73 0V14.22h-3.186v3.078h3.186zm16.416 3.906c.3-.144.63-.393.99-.747s.681-.864.963-1.53c.282-.666.423-1.467.423-2.403 0-.468-.06-1.086-.18-1.854-.12-.72-.18-1.272-.18-1.656 0-.492.141-.924.423-1.296.282-.372.741-.564 1.377-.576v-1.08c-.636-.024-1.095-.219-1.377-.585a2.048 2.048 0 01-.423-1.287c0-.384.06-.936.18-1.656.12-.768.18-1.386.18-1.854 0-.936-.141-1.737-.423-2.403-.282-.666-.603-1.176-.963-1.53-.36-.354-.69-.603-.99-.747h-2.88v.234c.432.18.834.492 1.206.936.372.444.669.987.891 1.629a6.32 6.32 0 01.333 2.079c0 .492-.06 1.11-.18 1.854a10.252 10.252 0 00-.162 1.638c0 .612.162 1.101.486 1.467.324.366.828.615 1.512.747v.036c-1.332.252-1.998.984-1.998 2.196 0 .456.054.996.162 1.62.12.768.18 1.398.18 1.89a6.32 6.32 0 01-.333 2.079c-.222.642-.519 1.185-.891 1.629-.372.444-.774.756-1.206.936v.234h2.88z'/%3E%3C/svg%3E%0A");
  }

  &--experiments h2 {
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='23' height='25'%3E%3Cpath fill='%2320202A' d='M22.393 18.795L16.068 8.393a1.7 1.7 0 01-.211-.825V2.511h.281c.668 0 1.23-.538 1.23-1.256 0-.681-.562-1.255-1.23-1.255H6.862c-.668 0-1.23.574-1.23 1.255 0 .682.562 1.256 1.23 1.256h.281v5.093c0 .287-.07.574-.21.825L.606 18.831a4.059 4.059 0 00-.104 4.089C1.205 24.21 2.505 25 3.945 25h15.11c1.44 0 2.74-.79 3.443-2.08.703-1.327.668-2.834-.105-4.125zM13.397 2.51v5.093c0 .753.211 1.47.598 2.116l1.335 2.224a7.84 7.84 0 01-2.143-.538 10.778 10.778 0 00-4.78-.753l.563-.933a4.086 4.086 0 00.597-2.116V2.511h3.83zm6.958 19.19a1.503 1.503 0 01-1.336.788H3.91a1.502 1.502 0 01-1.335-.789c-.21-.502-.21-1.112.105-1.578l3.971-6.492c1.757-.718 3.725-.682 5.727.107 1.336.503 2.636.79 3.936.79.21 0 .386-.036.597-.036l3.409 5.631c.316.466.316 1.076.035 1.578z'/%3E%3C/svg%3E");
  }

  &--share h2 {
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='28' height='28'%3E%3Cpath d='M18.278 0c2.778 0 5.055 2.277 5.055 5.056 0 2.778-2.277 5.055-5.055 5.055a5.03 5.03 0 01-3.245-1.179l-5.445 4.01c.336.675.523 1.425.523 2.225 0 .635-.124 1.25-.34 1.81l8.908 3.27c.9-1.41 2.48-2.358 4.265-2.358 2.779 0 5.056 2.277 5.056 5.055C28 25.723 25.723 28 22.944 28c-2.778 0-5.055-2.277-5.055-5.056 0-.165.008-.324.024-.486l-9.528-3.5a5.02 5.02 0 01-3.33 1.264C2.278 20.222 0 17.945 0 15.167c0-2.779 2.277-5.056 5.056-5.056 1.138 0 2.19.39 3.038 1.033l5.541-4.083a5.05 5.05 0 01-.413-2.005C13.222 2.277 15.5 0 18.278 0zm4.777 20.046a2.943 2.943 0 100 5.886 2.943 2.943 0 000-5.886zm-18.026-7.82a2.943 2.943 0 10.001 5.883 2.943 2.943 0 00-.001-5.882zM18.317 2.1a2.943 2.943 0 10.001 5.885 2.943 2.943 0 00-.001-5.885z'/%3E%3C/svg%3E");
  }

  &.active {
    box-shadow: 0px 5px 5px -3px rgba(0, 0, 0, 0.2), 0px 8px 10px 1px rgba(0, 0, 0, 0.14), 0px 3px 14px 2px rgba(0, 0, 0, 0.12);
    transform: translate3d(0, 0, 0);
  }

}
