@layer components {
  /* ======================================= */
  /* sidebar menu styles */
  /* ======================================= */

  /* sliding yellow links, no dropdowns */
  .null.region-sidebar-second {
    .menu {
      margin: 0;
    }
    .menu a {
      text-decoration: none;
      display: block;
      background-image: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAoAAAARCAYAAADkIz3lAAAAGXRFWHRTb2Z0d2FyZQBBZG9iZSBJbWFnZVJlYWR5ccllPAAAAh5JREFUeNpi/PPnz//Xb98xMDMy7mFgYHBlgAImZiYGZMB0++59Bke/SIbKlm4XBkbGbUDMAMZogOnps+cv//3/y7Bq0zaGsoZ2z1+/fq4DYkyFP3/+MK0vyXkiLS7KsGL9Vob6zomBzMzMK4BybMgKmSMiIj+xs7JuNtbX8bl9/5Hg7oNHGd6+fa9jY26szMbKugvoiF8ghzAnpaQwsLKyvuPj5dmtpa7scvPWPRGQ4u8/f+o62FjIsbOz7wPa8JM5OjqG4f+/fyD8hpeba7++jqbdw8fPxDbv3sfw4eMnPUtTQ1mgwgPM0bFxyE55zcPNdVhJXsby0ZPnkrsPHmP4+vWbnrG+rjzDi+fPsOHSurae/yxiKv8ZBOX+r1y/+T8Lv6AgekgY3bn3MPHYmQsMf/78ZvB1d2bgZGWZy/Dp0ydkbHD2wuXbdj5h/xmEFf4Hxqb+37Zrz+xde/fzsfz+8wdmku7Dx083FtW2yB0+fprB3cGGISLAa/avnz8LfjEwfGOBRpbGo6fP9uRWNoidPHORwdfDmSEjIWIuEyNjNlDuNzRmfik8ePzsWHZZvdi5i1cZnG3MGWKDfBZ9/fQlBaYIBFjevv9wMbO0hu/ajdsMTjYWDPnpCauA4vEgyX///sJ9yPLp02e+p89eMFgY6zMkRwZv+vLpczhMkouHC66Q8efPn/9v3r7L8PPXr+1AvhdyOL199xbOBggwAPE+9T0FxGv+AAAAAElFTkSuQmCC);
      background-position: 96% 10px;
      background-repeat: no-repeat;
      padding: 6px 20px 6px 0;
      background-color: transparent;
      color: #192a36;
      /* display: inline-block; */
      /* padding: 0 3px; */
      margin-left: 0;
      margin-right: -3px;
      position: relative;
      text-decoration: none;
      transition: color ease 0.3s;
      z-index: 0;
    }
    li.menu-item {
      border-bottom: 2px solid var(--upei-orange);
      font-size: 16px;
      padding-top: 0;
      a:before {
        content: "";
        position: absolute;
        z-index: -1;
        width: 0;
        height: 100%;
        left: 0;
        bottom: 0;
        background-color: var(--upei-orange);
        transition: all ease 0.3s;
      }
      a:hover:before {
        width: 100%;
      }
    }
  }
  /* sidebar block menu with dropdowns (may need to adjust .block-menu and/or regions) */
  /* *see the associated behavior */
  .region-sidebar-second {
    nav h2 {
      margin-bottom: 0;
    }
    nav ul.menu li a {
      text-decoration: none;
      padding: 7px 0 7px 10px;
      display: block;
      border-bottom: 2px solid #8c2004;
      color: #192a36;
    }
    .menu {
      margin: 0;
      /* margin-bottom: 1rem; */
    }
    .menu-item {
      padding: 0;
    }
    .menu-item--expanded .menu a {
      margin-left: 1em;
      border: none;
    }
    /* Hide nested menus by default */
    .block-menu .menu-item--expanded > ul {
      display: none;
    }

    /* Show when open */
    .block-menu .menu-item--expanded.open > ul {
      display: block;
    }

    /* Position container */
    .block-menu .menu-item--expanded {
      position: relative;
      list-style-type: none;
      list-style-image: none;
    }

    /* Caret button */
    .block-menu .menu-caret {
      position: absolute;
      right: 0.5rem;
      top: 0.75rem;
      cursor: pointer;
      font-size: 0.8rem;
      user-select: none;
    }

    /* Optional caret icon (triangle) */
    .block-menu .menu-caret::after {
      content: "▼";
    }

    /* Rotate when open */
    .block-menu .menu-item--expanded.open > .menu-caret::after {
      transform: rotate(180deg);
      display: inline-block;
    }

    .block-menu .menu-item--expanded > ul {
      display: block;
      max-height: 0;
      overflow: hidden;
      transition: max-height 0.5s ease;
    }

    .block-menu .menu-item--expanded.open > ul {
      max-height: 500px;
    }
  }
}