/* Toolbar */
.bslib-toolbar {
  --_divider-height: var(--bslib-toolbar-divider-height, 1lh);
  --_divider-width: var(--bslib-toolbar-divider-width, 2px);
  --_divider-gap: var(--bslib-toolbar-divider-gap, 1rem);
  --_divider-color: var(--bslib-toolbar-divider-color, var(--bs-border-color-translucent, rgba(40, 70, 94, 0.1)));
  // Sets the height/width (toolbar buttons are square) for toolbar buttons
  // Icon size is controlled by font-size
  --_toolbar-btn-size: var(--bslib-toolbar-btn-size, 1.75rem);
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0;

  /* ---- Toolbar options ---- */

  &[data-align="left"] {
    margin-right: auto;
    justify-content: start;
  }

  &[data-align="right"] {
    margin-left: auto;
    justify-content: end;
  }

  /* ---- Toolbar Input Buttons ---- */

  // Keep labels and icons centered in the button
  .bslib-toolbar-input-button {
    align-items: center;
    justify-content: center;
    line-height: 1; // Override Bootstrap's line-height to avoid too much vertical space
    height: var(--_toolbar-btn-size); // Keep square icon and label + icon button heights consistent
    display: flex; // Prevent Shiny from overwriting flex centering

    // Remove margins from action button elements
    .action-icon,
    .action-label {
      margin: 0;
    }

    &.btn-default:not(.btn-primary):not(.btn-secondary):not(.btn-success):not(.btn-danger):not(.btn-warning):not(.btn-info):not(.btn-light):not(.btn-dark) {
      background-color: transparent !important;
      background-image: none !important;
      color: currentColor !important;

      &:hover {
        background-color: rgba(var(--bs-emphasis-color-rgb, 0, 0, 0), 0.08) !important;
      }

      &:active {
        background-color: rgba(var(--bs-emphasis-color-rgb, 0, 0, 0), 0.16) !important;
      }

      &:focus-within {
        background-color: rgba(var(--bs-emphasis-color-rgb, 0, 0, 0), 0.12) !important;
        // Match the focus styling used by toolbar buttons (uses emphasis color for both border and shadow)
        box-shadow: 0 0 0 0.25rem rgba(var(--bs-emphasis-color-rgb, 0, 0, 0), 0.25) !important;
      }
    }
  }

  .bslib-toolbar-icon.action-icon {
    svg, img {
      margin: 0 !important;
    }
  }

  // Remove the left padding on label-only buttons so the text is centered
  .bslib-toolbar-input-button[data-type="label"] {
    .action-label {
      padding-left: 0;
    }
  }

  // Add spacing between icon and label in buttons with both
  .bslib-toolbar-input-button[data-type="both"] {
    .action-icon {
      margin-right: 0.35rem;
    }
  }

  // Square icon-only buttons
  .bslib-toolbar-input-button[data-type="icon"] {
    aspect-ratio: 1;
    line-height: 1 !important; // Ensure no line-height interference

    // Remove padding on hidden label to keep icon centered
    .action-label {
      padding-left: 0;
    }

    // Ensure icon is centered
    >.action-icon {
      display: flex;
      align-items: center;
      justify-content: center;
      line-height: 1; // Remove excess line-height
      margin: 0; // Remove any default margins
    }
  }

  /* ---- Toolbar Divider ---- */

  .bslib-toolbar-divider {
    align-self: center;
    height: var(--_divider-height);
    width: var(--_divider-gap);

    // Use a pseudo-element for the actual line so custom width controls spacing
    &::before {
      content: "";
      display: block;
      width: var(--_divider-width);
      height: 100%;
      background-color: var(--_divider-color);
      margin: 0 auto;
    }
  }

  .bslib-toolbar-spacer {
    margin-left: auto;
  }

  /* ---- Adjustments to other elements ---- */

  // Ensures uniformity of font sizing in elements and sub-elements (e.g., input select)
  &,
  & * {
    font-size: 0.9rem;
  }

  &>* {
    margin-bottom: 0 !important;
    width: auto;
    align-self: center;
  }
}

/* Support using toolbars in shiny input labels */
label:has(> .bslib-toolbar) {
  width: 100%;
}

/* Set toolbar width to 100% when it's a direct child of a label */
label > .bslib-toolbar {
  width: 100%;
}


/* Toolbar Select Input */
.bslib-toolbar-input-select {
  padding-inline: 0.25rem;
  height: var(--_toolbar-btn-size, 1.75rem);
  display: inline-flex;
  align-items: center;
  width: auto !important;

  @if $enable-rounded {
    border-radius: var(--bs-border-radius-sm, 0.25rem);
  }

  gap: 0.05rem;
  transition: border-color 0.15s ease-in-out,
  box-shadow 0.15s ease-in-out;

  select {
    // Necessary to restore the arrow removed by shiny .form-select class
    // appearance:none setting
    appearance: auto;
    background-image: none; // Removes Bootstrap's arrow to use native arrow
    padding: 0.1rem 0.5rem 0.1rem 0.1rem;
    border: none;
    background-color: transparent;
    color: currentColor;
    line-height: 1;
    width: auto;
    min-width: fit-content;
    font-family: inherit;

    // Remove Bootstrap's standard focus styles since we apply them to the container
    &:focus {
      outline: none;
      box-shadow: none;
    }
  }

  // Hover, active, and focus styling to highlight the select and options on interaction
  &:hover {
    background-color: rgba(var(--bs-emphasis-color-rgb, 0, 0, 0), 0.08);
  }

  &:active {
    background-color: rgba(var(--bs-emphasis-color-rgb, 0, 0, 0), 0.16);
  }

  &:focus-within {
    background-color: rgba(var(--bs-emphasis-color-rgb, 0, 0, 0), 0.12);
    // Match the focus styling used by toolbar buttons (uses emphasis color for both border and shadow)
    box-shadow: 0 0 0 0.25rem rgba(var(--bs-emphasis-color-rgb, 0, 0, 0), 0.25);
  }

  // Icon styling
  .bslib-toolbar-icon {
    display: inline-flex;
    align-items: center;
    color: var(--bs-secondary-color);
    margin-left: 0.15rem; // Add margin before icon for aesthetics

    &:empty {
      display: none;
    }
  }

  label,
  label.control-label {
    font-weight: 600;
    margin-bottom: 0;
    display: inline-flex;
    align-items: center;
  }

  .bslib-toolbar-label {
    margin-left: 0.15rem;
  }
}