/*
 * Choice groups (#6454): tabs, pills and buttons that collapse into one "Select ..." toggle on phones.
 * Markup comes from ChoiceGroupView::render(); behaviour comes from inc/cce-choices.js.
 *
 * Phones (under 768px): the list is a full-width column and the toggle shows once JavaScript runs. The list is hidden
 * until the group is opened. Without JavaScript the list shows as a column and the toggle stays hidden.
 * Desktop (768px and up): the toggle is hidden and the list is a wrapping row.
 */

.cce-choices,
.cce-choices *,
.cce-choices *::before,
.cce-choices *::after {
   box-sizing: border-box;
}

.cce-choices {
   position: relative;
   max-width: 100%;
   min-width: 0;
}

.cce-choices-list {
   display: flex;
   flex-wrap: wrap;
   gap: 6px;
   max-width: 100%;
   margin: 0;
   padding: 0;
   list-style: none;
}

.cce-choice {
   display: inline-flex;
   align-items: center;
   gap: 6px;
   min-height: 40px;
   max-width: 100%;
   padding: 8px 12px;
   border: 1px solid #b9c4cf;
   border-radius: 8px;
   background: #fff;
   color: inherit;
   font: inherit;
   line-height: 1.25;
   text-align: left;
   text-decoration: none;
   white-space: normal;
   overflow-wrap: anywhere;
   cursor: pointer;
}

.cce-choice[aria-current],
.cce-choice[aria-pressed='true'] {
   background: #1f4e79;
   border-color: #1f4e79;
   color: #fff;
   font-weight: 600;
}

.cce-choice[disabled],
.cce-choice[aria-disabled='true'] {
   opacity: 0.5;
   cursor: not-allowed;
}

.cce-choice-badge {
   display: inline-block;
   min-width: 1.5em;
   padding: 0 6px;
   border-radius: 999px;
   background: #e6ecf2;
   color: #1f2a36;
   font-size: 0.85em;
   text-align: center;
}

.cce-choice[aria-current] .cce-choice-badge,
.cce-choice[aria-pressed='true'] .cce-choice-badge {
   background: #fff;
   color: #1f4e79;
}

.cce-choices-toggle {
   display: none;
   align-items: center;
   gap: 8px;
   width: 100%;
   min-height: 40px;
   max-width: 100%;
   margin: 0;
   padding: 8px 12px;
   border: 1px solid #b9c4cf;
   border-radius: 12px;
   background: #fff;
   color: inherit;
   font: inherit;
   text-align: left;
   cursor: pointer;
}

.cce-choices-prompt {
   color: #5b6670;
   font-size: 0.85em;
   white-space: nowrap;
}

.cce-choices-toggle [data-cce-choices-current] {
   flex: 1 1 auto;
   min-width: 0;
   font-weight: 600;
   overflow-wrap: anywhere;
}

.cce-choices-toggle .fa-chevron-down {
   flex: 0 0 auto;
   transition: transform 0.15s ease;
}

.cce-choices-toggle[aria-expanded='true'] .fa-chevron-down {
   transform: rotate(180deg);
}

/* Phones: one column of full-width items, toggle on top once JavaScript runs. */
@media (max-width: 767px) {
   .cce-choices {
      width: 100%;
   }

   .cce-choices-list {
      flex-direction: column;
      flex-wrap: nowrap;
      align-items: stretch;
      width: 100%;
   }

   .cce-choice {
      display: flex;
      justify-content: space-between;
      width: 100%;
      border-radius: 12px;
   }

   html.cce-js .cce-choices-toggle {
      display: flex;
   }

   html.cce-js .cce-choices:not(.is-open) > .cce-choices-list {
      display: none;
   }
}

/* Desktop: the list is a wrapping row and the toggle is never shown. */
@media (min-width: 768px) {
   .cce-choices-toggle {
      display: none;
   }

   .cce-choices-list {
      display: flex;
   }
}