@use '@material/menu/mixins' as menu-mixins;
@use '@material/image-list/mixins' as image-list-mixins;

.page-selection_menu {
  > .mdc-typography--body2 {
    overflow-x: hidden;
  }

  .hero .mdc-menu-surface {
    position: static; // Required for proper IE11 alignment.
    z-index: 1;
  }

  .demo-content {
    position: relative;
    border: 1px solid;
  }

  .demo-controls {
    padding: 40px 20px;
  }

  .mdc-text-field input {
    width: 3em;
  }

  .demo-button__normal-text,
  .demo-button__long-text {
    display: none;
  }

  .demo-button--normal .demo-button__normal-text,
  .demo-button--long .demo-button__normal-text,
  .demo-button--long .demo-button__long-text {
    display: inline;
  }

  .standard-image-list {
    @include image-list-mixins.aspect(1.5); // Images are 3:2
    @include image-list-mixins.standard-columns(1);
    width: 200px;
  }

  #demo-menu {
    @include menu-mixins.width(6);
  }

  #demo-menu-2 {
    @include menu-mixins.width(5);
  }

  #demo-menu-3 {
    @include menu-mixins.width(4);
  }
}
