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

$overlay: (
  'padding': 48,
);

@layer base {
  body.has-overlay {
    overflow: hidden;
  }

  .overlay {
    @include transition(opacity, 0.1s, ease);

    width: 0;
    height: 0;
    background: get-map($theme, 'overlay');
    position: fixed;
    top: 0;
    left: 0;
    opacity: 0;
    z-index: -1;
    box-sizing: border-box;
    display: flex;
    flex-flow: column;
    align-items: center;
    overflow: hidden;

    &.open {
      width: 100vw;
      height: 100vh;
      height: 100svh;
      opacity: 1;
      z-index: 996;

      .overlay-close {
        display: block;
      }

      &.in-portal {
        z-index: 1000;
      }
    }

    > div,
    > section {
      width: 100vw;
      height: 100vh;
      margin-top: auto;
      margin-bottom: auto;
      overflow: hidden auto;
    }
  }

  @include breakpoint('min-width', 'sm') {
    .overlay {
      &.open {
        padding: px-to-rem(get-map($overlay, 'padding'));
        overflow-y: auto;
      }

      > div,
      > section {
        width: auto;
        height: auto;
        overflow: unset;
      }
    }
  }
}
