src/components/FlyoutMenu/FlyoutMenu.scss
@import '../../constants/styles';
@import '../../constants/overlay';

.FlyoutMenu {
  @extend %overlay;
  overflow: auto;

  @include small-browser-height {
    // show scroll bar when height of screen is very small
    max-height: 100%;
    // when max height is set, it loses spacing.
    display: block;
  }

  display: flex;
  flex-direction: column;
  align-items: flex-start;

  border-radius: 4px;
  background: var(--component-background);
  box-shadow: 0px 0px 3px 0px var(--document-box-shadow);
  padding: 6px 0;

  // Classes that use this can add this class to any rows.
  // TODO: if this is non-sustainable, we should maybe put this in its own
  // component (FlyoutMenuRow?). But for now this is simple enough.
  .row {
    width: 100%;
    margin: 2px 0;
    height: 32px;
    display: flex;
    align-items: center;
    padding-inline-start: 12px;
    padding-inline-end: 18px;
    cursor: pointer;

    &:hover {
      background: var(--popup-button-hover);
    }

    &.active {
      background: var(--popup-button-active);
    }

    .title {
      margin-inline-start: 4px;
    }
  }

  // Same as .row
  .type {
    margin-top: 2px;
    margin-bottom: 8px;
    padding-inline-start: 12px;
    padding-inline-end: 18px;
    font-weight: bold;
  }

  // Same as .row
  .divider {
    height: 1px;
    background: var(--divider);
    margin: 8px 8px;
    width: calc(100% - 16px);
  }

  // Same as .row
  .dividerSmall {
    height: 1px;
    background: var(--divider);
    margin: 2px 8px;
    width: calc(100% - 16px);
  }

  &.mobile {
    position: fixed;
    width: 100%;
    inset-inline-start: 0;
    inset-block-end: 0;

    border-radius: 0px;
    border-top-left-radius: 4px;
    border-top-right-radius: 4px;
    border: 0px;
    box-shadow: 0px 0px 3px 0px var(--document-box-shadow);

    padding-top: 30px;
    padding-bottom: 30px;

    .swipe-indicator {
      background: var(--gray-6);
      border-radius: 2px;
      height: 4px;
      width: 38px;
      position: absolute;
      inset-block-start: 12px;
      margin-inline-start: auto;
      margin-inline-end: auto;
      inset-inline-start: 0;
      inset-inline-end: 0;
    }

    .type,
    .row {
      padding: 0 24px;
    }
  }

  &[data-element='pageManipulationOverlay'] {
    .Button .Icon {
      path,
      rect {
        fill: var(--icon-color);
      }
    }

    &.mobile {
      z-index: 101;
    }
  }
}
