@media screen and (max-width: 48rem) {
  .election-menu-block__button-container {
    padding: 0 1rem;
  }

  .election-menu-block__button-container button {
    display: flex;
    padding: 0.75rem;
    font-size: 1.1875rem;
    font-weight: bold;

    svg {
      width: 1.5em;
      height: 1.5em;
      margin-right: 0.5em;
      fill: var(--button-text-color, #fff);
      transition: transform 0.2s ease;
    }

    &[aria-expanded="true"] svg {
      transform: rotate(180deg);
    }

    &:focus svg,
    &:hover svg {
      fill: var(--button-text-color-hover, #000);
    }
  }
}

#election-menu {
  --election-menu-item-bg-color: #eaeaea;

  padding-inline: 1rem;
}

#election-menu[aria-hidden="true"] {
  display: none;
}

.election-menu__list {
  padding-left: 0;
  list-style: none;
}

.election-menu__list-item {
  margin-bottom: 0.1875rem;
  padding: 0;
  font-size: var(--font-size, 1rem);
  font-weight: bold;
}

.election-menu__list-item a {
  display: block;
  padding: 0.75rem;
  text-decoration: none;
  color: var(--color-black, #252525);
  background-color: var(--election-menu-item-bg-color);
}

.election-menu__list-item a:hover {
  text-decoration: underline;
}

.election-menu__list-item.active a {
  background-color: #fdffbd;
  box-shadow: inset 0 -3px 0 black;
}