/**
 * @file
 * AI Tools Library menu and layout styles with support for Claro, Gin light,
 * and Gin dark themes.
 *
 * This file uses CSS custom properties with a fallback chain:
 * 1. Gin-specific variables (--gin-*)
 * 2. Drupal core/Claro variables (--color-*)
 * 3. Hardcoded fallback values
 *
 * Related issue: #3582473
 */

/**
 * Negative margins compensate for modal dialog padding and compensate for
 * positioning that would otherwise hide the active tab indicator on the left.
 */

.ai-tools-library-wrapper .messages-list,
.ai-tools-library-wrapper .messages {
  margin-top: 0;
  margin-bottom: var(--space-l);
}

.ai-tools-library-menu {
  position: sticky;
  top: 0;
  align-self: flex-start;
  display: block;
  width: var(--vertical-tabs-menu-width);
  margin: 0;
  padding-top: var(--vertical-tabs-menu-item-shadow-extraspace);
  list-style: none;
  color: var(--gin-color-text, var(--color-text));
}

[dir="rtl"] .ai-tools-library-menu {
  margin: 0;
}

.ai-tools-library-menu__item {
  overflow: hidden;
  margin: var(--vertical-tabs-menu-item--top-margin) var(--vertical-tabs-menu-item--right-margin) var(--vertical-tabs-menu-item--bottom-margin) var(--vertical-tabs-menu-item--left-margin); /* LTR */
  padding: var(--vertical-tabs-menu-item-shadow-extraspace) 0;
}

[dir="rtl"] .ai-tools-library-menu__item {
  margin-right: var(--vertical-tabs-menu-item--left-margin);
  margin-left: var(--vertical-tabs-menu-item--right-margin);
}

.ai-tools-library-menu__item::before {
  z-index: var(--vertical-tabs-menu--z-index); /* The line should be kept above the vertical tabs menu link to keep it visible even if the link is hovered and gets the 'hover' background color. */
  display: block;
  width: 100%;
  margin-top: calc(var(--vertical-tabs-menu-separator-size) * -1);
  content: "";
  border-top: var(--vertical-tabs-menu-separator-size) solid var(--vertical-tabs-menu-separator-color);
}

.ai-tools-library-menu__link {
  position: relative;
  display: block;
  margin-top: calc(var(--vertical-tabs-border-size) * -1);
  padding: var(--space-s) var(--space-s) var(--space-s) calc(var(--space-l) - var(--vertical-tabs-menu-link--active-border-size)); /* LTR */
  -webkit-text-decoration: none;
  text-decoration: none;
  color: var(--gin-color-text, var(--color-text));
  border: var(--vertical-tabs-border-size) solid transparent;
  border-width: var(--vertical-tabs-border-size) 0 var(--vertical-tabs-border-size) var(--vertical-tabs-menu-link--active-border-size); /* LTR */
  border-radius: var(--vertical-tabs-border-radius) 0 0 var(--vertical-tabs-border-radius); /* LTR */
}

[dir="rtl"] .ai-tools-library-menu__link {
  padding-right: calc(var(--space-l) - var(--vertical-tabs-menu-link--active-border-size));
  padding-left: var(--space-s);
  border-width: var(--vertical-tabs-border-size) var(--vertical-tabs-menu-link--active-border-size) var(--vertical-tabs-border-size) 0;
  border-radius: 0 var(--vertical-tabs-border-radius) var(--vertical-tabs-border-radius) 0;
}

/* Menu link states. */

.ai-tools-library-menu__link:focus {
  z-index: calc(var(--vertical-tabs-menu--z-index) + 3); /* Focus state should be on the highest level to make the focus effect be fully visible. This also means that it should have bigger z-index than the selected link. */
  -webkit-text-decoration: none;
  text-decoration: none;
  box-shadow: none;
}

.ai-tools-library-menu__link:hover {
  -webkit-text-decoration: none;
  text-decoration: none;
  color: var(--gin-color-primary, var(--color-absolutezero, #0073e6));
  /* These borders are necessary to replace the dividing lines while in the hover state. */
  border-top: var(--vertical-tabs-menu-separator-size) solid var(--vertical-tabs-menu-separator-color);
  border-bottom: var(--vertical-tabs-menu-separator-size) solid var(--vertical-tabs-menu-separator-color);
  background: var(--gin-bg-layer2, var(--color-bgblue-hover, rgba(0, 83, 209, 0.04)));
}

/* This pseudo element provides the background for the hover state. */

.ai-tools-library-menu__link::before {
  position: absolute;
  z-index: calc(var(--vertical-tabs-menu--z-index) - 1); /* This should be on a lower level than the menu-item separator lines. */
  top: calc(var(--vertical-tabs-border-size) * -1);
  right: 0; /* LTR */
  bottom: calc(var(--vertical-tabs-border-size) * -1);
  left: calc(var(--vertical-tabs-menu-link--active-border-size) * -1); /* LTR */
  content: "";
  pointer-events: none;
  background-clip: padding-box;
}

[dir="rtl"] .ai-tools-library-menu__link::before {
  right: calc(var(--vertical-tabs-menu-link--active-border-size) * -1);
  left: 0;
}

.ai-tools-library-menu__link:focus::after {
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  margin: calc(var(--vertical-tabs-border-size) * -1) calc(var(--vertical-tabs-menu-link--active-border-size) * -1);
  content: "";
  pointer-events: none;
  border: var(--vertical-tabs-menu-link-focus-border-size) solid var(--color-focus);
  border-radius: var(--vertical-tabs-border-radius);
}

.ai-tools-library-menu__link.active {
  z-index: calc(var(--vertical-tabs-menu--z-index) + 2); /* The selected menu link should be on a higher level than the white masking line that hides the gray separator. */
  color: var(--gin-color-primary, var(--color-absolutezero, #0073e6));
  border-color: var(--vertical-tabs-border-color) transparent;
  background-color: var(--gin-bg-layer, var(--color-white, #fff));
  box-shadow: var(--vertical-tabs-shadow);
}

.ai-tools-library-menu__link.active:hover {
  color: var(--gin-color-primary-hover, var(--color-absolutezero-hover, #0062c7));
  background-color: var(--gin-bg-layer2, var(--color-bgblue-hover, rgba(0, 83, 209, 0.04)));
}

.ai-tools-library-menu__link.active::before {
  z-index: 1; /* The blue active-tab indication should be on a higher level than the green focus border. */
  border-left: var(--vertical-tabs-menu-link--active-border-size) solid var(--vertical-tabs-menu-link--active-border-color); /* LTR */
  border-radius: var(--base-border-radius) 0 0 var(--base-border-radius); /* LTR */
}

[dir="rtl"] .ai-tools-library-menu__link.active::before {
  border-right: var(--vertical-tabs-menu-link--active-border-size) solid var(--vertical-tabs-menu-link--active-border-color);
  border-left: 0;
  border-radius: 0 var(--base-border-radius) var(--base-border-radius) 0;
}

.ai-tools-library-menu__link.active:hover::before {
  background: none;
}

.ai-tools-library-content {
  width: 100%;
  padding: 1em;
  outline: none;
  overflow-y: auto;
}

.ai-tools-library-menu + .ai-tools-library-content {
  z-index: var(--vertical-tabs-menu--z-index);
  border-left: var(--vertical-tabs-border); /* LTR */
  box-shadow: var(--vertical-tabs-shadow);
}

[dir="rtl"] .ai-tools-library-menu + .ai-tools-library-content {
  border-right: var(--vertical-tabs-border);
  border-left: 0;
}

.ai-tools-library-view__rows .ai-tools-selection {
  display: flex;
  flex-wrap: wrap;
  flex-basis: 100%;
  margin: 0 -0.5rem;
}
