/*

###################################
### ORGANSIM: ghost-frame-block ###
###################################

### INFO:

The tool-block can contain two children. On larger screens, the children will be placed side by side; On smaller screens, among each another.
This positioning can be change by using the modifier `-alternate`.

### MODIFIERS:

*/

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

@import '../templates/_default.scss';

.#{utility('stage')} {
  .#{organism('ghost-frame-block')} {
    grid-column: 15 / -1;
    max-width: 360px;
    position: absolute;
    left: 60px;
    top: 0;

    @media (min-width: 768px) {
      grid-column: 14 / -2;
      max-width: 100%;
      position: relative;
      left: 0;
      margin-top: -65%;
    }

    @media (min-width: 1024px) {
      grid-column: 14 / -3;
      margin-top: -70%;
    }

    .#{molecule('ghost-frame-mobile')} {
      max-width: 25%;
      padding: 2.5% 1% 1.5%;
    }

    .#{molecule('ghost-frame-tablet')} {
      max-width: 38%;
      padding: 3% 1% 1%;
    }

    .#{molecule('ghost-frame-desktop')} {
      max-width: 90%;
      padding: 3% 1.5% 1.5%;
    }
  }
}


.#{organism('ghost-frame-block')} {
  position: relative;
  width: 100%;

  @media (max-width: 767px) {
    left: 0;
  }

  .#{molecule('ghost-frame-mobile')},
  .#{molecule('ghost-frame-tablet')},
  .#{molecule('ghost-frame-desktop')} {
    position: absolute;
  }

  .all + & {
    .#{molecule('ghost-frame-desktop')} {
      margin-top: 5%;
      margin-left: 10%;

      &:before {
        height: 3%;
        top: 2%;
      }
    }

    .#{molecule('ghost-frame-mobile')} {
      margin-top: 30%;
      margin-left: 30%;
    }

    .#{molecule('ghost-frame-tablet')} {
      margin-top: 15%;
      margin-left: 0%;
    }
  }

  .tablet-mobile + & {
    @media (max-width: 767px) {
      margin-left: 15%;
    }

    .#{molecule('ghost-frame-desktop')} {
      display: none;
    }

    .#{molecule('ghost-frame-mobile')} {
      margin-top: 26%;
      margin-left: 0%;
      max-width: 25%;
    }

    .#{molecule('ghost-frame-tablet')} {
      margin-top: 5%;
      margin-left: 20%;
      max-width: 50%;
    }
  }

  .mobile + & {
    .#{molecule('ghost-frame-desktop')} {
      display: none;
    }

    .#{molecule('ghost-frame-tablet')} {
      display: none;
    }

    .#{molecule('ghost-frame-mobile')} {
      margin-top: 5%;
      margin-left: 30%;
      width: 40vw;
      max-width: 50%;
      padding: 3.5% 2% 2.5%;

      @media (min-width: 768px) {
        margin-top: 0;
        margin-left: 5%;
        width: 17vw;
      }
    }
  }
}
