@use '@material/theme/theme';
@use '@material/feature-targeting/feature-targeting';
@use '@material/menu-surface/variables' as menu-surface-variables;
@use '@material/dialog/variables' as dialog-variables;
@use '@material/elevation/mixins' as elevation-mixins;
@use '@material/menu-surface/mixins' as menu-surface-mixins;
@use '@material/top-app-bar/variables' as top-app-bar-variables;
@use '@material/drawer/variables' as drawer-variables;

@mixin background {
  @include theme.property(background-color, background);
}

@mixin selected($withBorder: 0) {
  @include theme.property(background-color, primary);
  @include theme.property(color, on-primary);

  @if ($withBorder == 1) {
    @include theme.property(border-color, primary);
  }
}

@mixin menu-in-dialog($query: feature-targeting.all()) {
  position: fixed !important;
  top: 0 !important;
  right: 0;
  bottom: 0 !important;
  left: 0 !important;
  flex-direction: row;
  align-items: center;
  justify-content: space-around;
  max-width: 100vw !important;
  max-height: 100vh !important;
  background-color: transparent;
  box-shadow: none;

  .mdc-deprecated-list {
    z-index: drawer-variables.$z-index;
    width: dialog-variables.$max-width;
    @include elevation-mixins.elevation($z-value: 8, $query: $query);
    @include menu-surface-mixins.fill-color(surface, $query);
    @include menu-surface-mixins.ink-color(on-surface, $query);
    @include menu-surface-mixins.shape-radius(
      menu-surface-variables.$shape-radius,
      false,
      $query
    );
  }

  &.mdc-menu-surface--open {
    display: flex;

    .mdc-drawer-scrim {
      display: block;
      background-color: rgba(0, 0, 0, 0.32);
    }

    .mdc-deprecated-list {
      max-height: 100%;
      overflow-y: scroll;
    }
  }

  @media (max-width: top-app-bar-variables.$mobile-breakpoint) {
    .mdc-deprecated-list {
      width: 100%;
    }
  }
}