/* POPOUT */
%popout {
  box-shadow: none;
  &[style*='overflow: hidden'] {
    box-shadow: 0 0 10px rgba(0, 0, 0, 0.5);
  }
  header {
    background: $main-color;
    border-radius: 3px 3px 0 0;
  }
  section {
    background: rgba(0, 0, 0, 0.7);
    border-radius: 0 0 3px 3px;
  }
}
%popouts {
  >%popoutTop,
  >%popoutTopLeft,
  >%popoutTopRight {
    &:after {
      border-top-color: rgba(0, 0, 0, 0.7);
    }
  }
  >%popoutRight {
    &:after {
      border-right-color: rgba(0, 0, 0, 0.7);
    }
  }
  >%popoutLeft {
    &:after {
      border-left-color: rgba(0, 0, 0, 0.7);
    }
  }
  >%popoutBottom,
  >%popoutBottomLeft,
  >%popoutBottomRight {
    &:after {
      border-bottom-color: $main-color;
    }
  }
}