popover.menu {
  > contents {
    min-width: 120px;
  }

  scrollbar.vertical > range > trough > slider {
    min-height: 26px;
  }

  box.inline-buttons {
    padding: 0 $menu_padding;

    button.image-button.model {
      @extend %button_basic_flat;

      min-height: 32px;
      min-width: 32px;
      padding: 0;
      border: none;
      outline: none;
      transition: none;

      &:selected {
        background-color: $selected_color;

        &:active {
          background-color: $selected_active_color;
        }
      }
    }
  }

  box.circular-buttons {
    padding: $menu_padding $menu_padding 6px;

    button.circular.image-button.model {
      @extend %button_basic_flat;

      outline: none;
      padding: 11px;

      box-shadow: inset 0 0 0 1px $border_color;

      &:selected {
        background-color: $selected_hover_color;

        @media (prefers-contrast: more) {
          box-shadow: none;
        }

        &:active {
          background-color: $selected_active_color;
        }
      }
    }
  }

  > contents {
    padding: 0;

    &, > scrolledwindow > viewport {
      > stack > box {
        padding: $menu_margin;
      }
    }
  }

  separator {
    margin: 6px 0;
  }

  list separator {
    margin: 0;
  }

  accelerator {
    color: color-mix(in srgb, currentColor var(--dim-opacity), transparent);

    &:dir(ltr) { margin-left: $menu_padding; }
    &:dir(rtl) { margin-right: $menu_padding; }
  }

  check,
  radio {
    min-width: 14px;
    min-height: 14px;
    -gtk-icon-size: 14px;
    padding: 2px;

    &,
    &:hover:checked,
    &:hover:indeterminate,
    &:hover:not(:checked):not(:indeterminate),
    &:active:checked,
    &:active:indeterminate,
    &:active:not(:checked):not(:indeterminate), {
      background: none;
      box-shadow: none;
      color: inherit;
    }
  }

  .osd & {
    check, radio {
      background: none;
      color: inherit;
    }
  }

  //only menu radios have a border
  radio {
    padding: 1px;
    border: 1px solid color-mix(in srgb, currentColor $dimmer_opacity, transparent);

    @media (prefers-contrast: more) {
      border-color: color-mix(in srgb, currentColor $dimmer_opacity_hc, transparent);
    }
  }

  check,
  radio,
  arrow {
    &.left {
      margin-left: -2px;
      margin-right: 6px;
    }

    &.right {
      margin-left: 6px;
      margin-right: -2px;
    }
  }

  modelbutton {
    min-height: 32px;
    min-width: 40px;
    padding: 0 $menu_padding;
    border-radius: $menu_radius;
    background-color: transparent;

    &:hover,
    &:selected {
      background-color: $selected_color;
    }

    &:active {
      background-color: $selected_active_color; // matching buttons
    }

    @media (prefers-contrast: more) {
      &:hover,
      &:selected,
      &:active {
        box-shadow: inset 0 0 0 1px $border_color;
      }
    }

    arrow {
      background: none;
      min-width: 16px;
      min-height: 16px;
      opacity: $dimmer_opacity;

      @media (prefers-contrast: more) {
        opacity: $dimmer_opacity_hc;
      }

      &:hover { background: none; }

      &:disabled {
        filter: Opacity(var(--disabled-opacity));
      }

      &.left { -gtk-icon-source: -gtk-icontheme("go-previous-symbolic"); }

      &.right { -gtk-icon-source: -gtk-icontheme("go-next-symbolic"); }
    }
  }

  label.title {
    font-weight: bold;
    padding: 4px ($menu_padding + 20px); //this will fall apart with font sizing
  }

  list, listview {
    background: none;
    color: inherit;

    > row {
      border-radius: $menu_radius;
      padding: 0 $menu_padding;
      min-height: 32px;
      min-width: 40px;

      &:selected {
        background: none;
      }

      &:hover {
        &, &:selected.activatable {
          background-color: $selected_color;
        }
      }

      &:active {
        &, &:selected.activatable {
          background-color: $selected_active_color;
        }
      }

      &.has-open-popup {
        &, &:selected.activatable {
          background-color: $selected_color;
        }
      }

      @media (prefers-contrast: more) {
        &:hover,
        &:active,
        &.has-open-popup {
          box-shadow: inset 0 0 0 1px $border_color;
        }
      }

      > box {
        border-spacing: 6px;
      }
    }
  }

  // Standalone lists should have same margins as menu sections,
  // but we don't want that on lists inside sections themselves
  contents > list,
  contents > listview,
  scrolledwindow > viewport > list,
  scrolledwindow > listview {
    padding: $menu_margin 0; //only vertical padding. horizontal row size would clip

    > row {
      margin: 0 $menu_margin;

      padding: 9px $menu_padding;
      min-height: 0;
    }
  }
}

menubar {
  box-shadow: inset 0 -1px $border_color;
  padding-bottom: 1px;

  > item {
    min-height: 16px;
    padding: 4px 8px;
    border-radius: $button_radius;

    &:selected { //Seems like it :hover even with keyboard focus
      background-color: $selected_color;

      @media (prefers-contrast: more) {
        box-shadow: inset 0 0 0 1px $border_color;
      }
    }

    //nested submenus
    popover.menu popover.menu {
      padding: 0 0 4px 0;
    }

    popover.menu popover.menu > contents {
      margin: 0;
      border-radius: $popover_radius; //including top
    }
  }
}

%menubar-inline {
  box-shadow: none;
  padding-bottom: 0;
}

%menubar-shrunk {}
