src/components/ModularComponents/Flyout/Flyout.scss
@import '../../../constants/styles';
@import '../../../constants/overlay';
@import '../../../constants/lightWCAG';

.Flyout {
  z-index: 90;
  position: absolute;
  display: flex;
  background: var(--gray-0);
  border-radius: 4px;

  .FlyoutContainer {
    overflow: visible;
    z-index: 200;
    background-color: var(--component-background);
    min-width: 140px;
    max-width: 328px;
    padding: 4px 0;
    margin: 0;
    font-size: var(--font-size-default);
    font-family: var(--font-family);
    border: 1px solid var(--divider);
    border-radius: 4px;
    text-overflow: ellipsis;

    .divider {
      margin: 6px 0;
      width: 100%;
      height: 1px;
      background-color: var(--divider);

      // Hide duplicate dividers, or dividers that are the first or last child
      &:last-child,
      &:first-child,
      & + .flyout-item-container:empty + .divider,
      & + .divider {
        display: none;
      }
    }

    .flyout-item-dropdown-container {
      display: flex;
    }

    .flyout-item-container {
      height: 32px;
      margin: 4px 0;
      display: flex;
      flex-direction: row;
      align-items: center;
      justify-content: center;
      width: 100%;
      min-width: max-content;

      &:empty {
        display: none;
      }

      .menu-icon {
        width: 24px;
        height: 24px;
        margin-inline-end: 8px;
        display: flex;
        justify-content: center;
      }

      .icon-open-submenu {
        cursor: pointer;
        justify-self: flex-end;
        width: 16px;
        height: 16px;
        margin-inline-end: 0px;
        padding-top: 2px;
        display: flex;
      }

      .menu-icon.Icon svg path {
        justify-self: flex-start;
      }

      .menu-container,
      .flyout-item {
        @include button-reset;
        display: flex;
        flex-direction: row;
        align-items: center;
        width: 100%;
        height: 100%;
        min-width: max-content;
        box-sizing: border-box;
        padding: 4px 8px;
        margin: 0 2px;
        gap: 10px;
        white-space: nowrap;

        &:not(.back-button) {
          justify-content: space-between;
        }

        &:not(:disabled) {
          cursor: pointer;
        }

        &:focus-visible {
          outline: var(--focus-visible-outline);
        }

        &[disabled] {
          color: var(--gray-5);
        }

        .icon-label-wrapper {
          display: flex;
          align-items: center;
        }

        .flyout-item-label {
          text-transform: capitalize;
          justify-self: flex-start;
          font-size: var(--font-size-default);
          margin-inline-end: 10px;
        }
      }

      &:hover:not(.disabled) {
        background-color: var(--blue-6);
      }

      &.active:not(.disabled) {
        background-color: var(--blue-5);
      }

      &.active:not(.disabled),
      &:hover:not(.disabled) {
        color: var(--gray-0);

        .Icon,
        .Icon svg * {
          color: var(--gray-0);
        }

        .hotkey-wrapper,
        .flyout-item-label,
        .secondary-label {
          color: var(--gray-0);
        }

        .ZoomText {
          .label,
          .value {
            color: var(--gray-0);
          }
        }
      }

      .custom-element-wrapper {
        display: flex;
      }

      .ZoomItem {
        padding: 0;

        &:hover {
          background: transparent;
        }

        .Icon {
          margin-inline-start: 0;
        }
      }

      .hotkey-wrapper {
        color: var(--gray-7);
        margin-inline-start: 8px;
        margin-inline-end: 2px;
      }

      &.disabled {
        cursor: default;

        button,
        .Icon,
        .Icon svg * {
          color: var(--gray-5);
        }

        .hotkey-wrapper {
          color: var(--gray-5);
          pointer-events: none;
        }
      }

      &.zoom-options {
        .flyout-item {
          justify-content: space-between;
        }
      }

      button.back-button {
        @include button-reset;
        font-size: var(--font-size-default) !important;

        &:focus-visible {
          outline: var(--focus-visible-outline);
        }

        .Icon {
          width: 16px;
          height: 16px;
          margin-inline-end: 16px;
        }

        &:hover {
          color: var(--gray-0);

          .Icon,
          .Icon svg *,
          .hotkey-wrapper,
          .ZoomText .label .value {
            color: var(--gray-0);
          }
        }
      }
    }

    .flyout-label {
      padding: 8px 18px 8px 12px;
      font-weight: bold;
    }
  }

  &.legacy-ui {
    .flyout-item-container {
      &:hover:not([disabled]):not(.disabled) {
        background-color: var(--popup-button-hover);

        .flyout-item-label,
        .secondary-label {
          color: var(--text-color);
        }

        .Icon svg * {
          color: var(--icon-color);
        }
      }
    }
  }

  &.mobile {
    position: fixed;
    width: 100%;
    max-height: 100vh;
    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: 30px 0 12px;
    z-index: 110;
    overflow-y: auto;

    .swipe-indicator {
      @extend %swipe-indicator;
    }

    .FlyoutContainer {
      min-width: 100%;
      border: none;
    }
  }
}
