/**
 * @file
 * OxfCMS Layout Tabs
 */

/* ============================================
   CSS Custom Properties
   ============================================ */
:root {
  /* Stepper buttons */
  /* 1920 (max) breakpoint sizing (Figma) */
  --tabs--stepper-width: 60px;
  --tabs--stepper-background: var(--tabs--tab-border_colour, #1d42a6);
  --tabs--stepper-text: #ffffff;
  --tabs--stepper-hover-background: #ffffff;
  --tabs--stepper-hover-text: var(--tabs--tab-border_colour, #1d42a6);
  --tabs--stepper-hover-border-colour: var(--tabs--tab-border_colour, #1d42a6);
  --tabs--stepper-border-width: 2px;
  --tabs--stepper-border-radius: 6px;
  --tabs--stepper-icon-size: 22px;

  /* Tab truncation */
  --tabs--tab-max-width: 200px;
  --tabs--tab-max-width-sm: 150px;

  /* Tooltip */
  --tabs--tooltip-background: #111827;
  --tabs--tooltip-text: #ffffff;
  --tabs--tooltip-border-radius: 0.375rem;
  --tabs--tooltip-padding: 0.5rem 0.75rem;
  --tabs--tooltip-font-size: 0.875rem;
  --tabs--tooltip-font-weight: 500;

  /* Tab styles */
  --tabs--tab-background: transparent;
  --tabs--tab-border_colour: #1d42a6;
  --tabs--tab-text: #1d42a6;
  --tabs--border-radius-size: 17px;
  --tabs--border-size: 1px;
  --tabs--border_style: solid;
  --tabs--font_family: 'Roboto', sans-serif;
  --tabs--font_size: 22px;
  --tabs--font_weight: 700;
  --tabs--padding: 17px 22px;
  --tabs--active-bg-color: var(--secondary-brand-colour-4);
  --tabs--active-fg-color: #ffffff;
  --tabs--active--tab-background: #1d42a6;
  --tabs--active--tab-border_colour: #1d34a6;
  --tabs--active--tab-text: #ffffff;
  --tabs--hover--tab-background: #002147;
  --tabs--hover--tab-text: #ffffff;
  --tabs--content-border_colour: #1d42a6;
}

/* ============================================
   Main Container
   ============================================ */
.oxfcms-tabs-layout {
  max-width: 100%; /* Constrain to parent width */
  overflow: hidden; /* Prevent horizontal overflow of entire layout */
}

.oxfcms-tabs {
  display: flex;
  align-items: stretch;
  gap: 8px; /* Add spacing between steppers and tabs */
  width: 100%;
  max-width: 100%; /* Ensure tabs container doesn't grow beyond parent */
}

/* In edit mode, controls overlay inside the tab (no extra height). */

/* ============================================
   Stepper Buttons
   ============================================ */
.oxfcms-tabs__stepper {
  background-color: var(--tabs--stepper-background);
  color: var(--tabs--stepper-text);
  width: var(--tabs--stepper-width);
  height: var(--tabs--stepper-width);
  aspect-ratio: 1 / 1; /* Maintain square shape */
  flex: none;
  display: flex;
  align-items: center;
  justify-content: center;
  box-sizing: border-box;
  border: var(--tabs--stepper-border-width, 2px) solid transparent;
  border-radius: var(--tabs--stepper-border-radius, 6px);
  cursor: pointer;
  transition: background-color 0.2s ease, border-color 0.2s ease, color 0.2s ease, box-shadow 0.2s ease;
  padding: 0;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.12);

  &:hover {
    background-color: var(--tabs--stepper-hover-background);
    border-color: var(--tabs--stepper-hover-border-colour, var(--tabs--tab-border_colour, #1d42a6));
    color: var(--tabs--stepper-hover-text);
    box-shadow: none;
  }

  &:focus-visible {
    outline: 2px solid var(--tabs--tab-border_colour, #1d42a6);
    outline-offset: 2px;
  }

  &.hidden {
    display: none;
  }

  svg {
    width: var(--tabs--stepper-icon-size, 1.375rem);
    height: var(--tabs--stepper-icon-size, 1.375rem);

    polyline {
      stroke-width: 2;
    }
  }
}


/* ============================================
   Scroll Window
   ============================================ */
.oxfcms-tabs__scroll-window {
  min-width: 0; /* Allow flex item to shrink below content size */
  display: flex;
  overflow: hidden;
  position: relative;
  border-top: var(--tabs--border-size, 1px) solid var(--tabs--tab-border_colour, #1d42a6);
  border-bottom: var(--tabs--border-size, 1px) solid var(--tabs--tab-border_colour, #1d42a6);
  background-color: var(--tabs--tab-background, transparent);

  /* Fade gradient on left edge when scrolled */
  &::before {
    content: '';
    position: absolute;
    left: 0;
    top: 0;
    bottom: 0;
    width: 40px;
    background: linear-gradient(to right,
      var(--tabs--tab-background, #ffffff) 0%,
      transparent 100%
    );
    opacity: 0;
    pointer-events: none;
    z-index: 10;
    transition: opacity 0.3s ease;
  }

  /* Fade gradient on right edge when not at end */
  &::after {
    content: '';
    position: absolute;
    right: 0;
    top: 0;
    bottom: 0;
    width: 40px;
    background: linear-gradient(to left,
      var(--tabs--tab-background, #ffffff) 0%,
      transparent 100%
    );
    opacity: 0;
    pointer-events: none;
    z-index: 10;
    transition: opacity 0.3s ease;
  }

  /* Show left fade when not at start */
  &:not(.is-start)::before {
    opacity: 1;
  }

  /* Show right fade when not at end */
  &:not(.is-end)::after {
    opacity: 1;
  }

  /* Border radius based on scroll position */
  &.is-start {
    border-left: var(--tabs--border-size, 1px) solid var(--tabs--tab-border_colour, #1d42a6);
    border-top-left-radius: var(--tabs--border-radius-size, 10px);
    border-bottom-left-radius: var(--tabs--border-radius-size, 10px);
  }

  &.is-end {
    border-right: var(--tabs--border-size, 1px) solid var(--tabs--tab-border_colour, #1d42a6);
    border-top-right-radius: var(--tabs--border-radius-size, 10px);
    border-bottom-right-radius: var(--tabs--border-radius-size, 10px);
  }
}

/* ============================================
   Tab List
   ============================================ */
.oxfcms-tabs__list {
  display: flex;
  align-items: stretch;
  overflow-x: auto;
  scroll-behavior: smooth;
  -ms-overflow-style: none;
  scrollbar-width: none;

  &::-webkit-scrollbar {
    display: none;
  }
}

/* ============================================
   Individual Tab
   ============================================ */
.oxfcms-tab {
  position: relative; /* For absolute positioning of controls */
  border-right: var(--tabs--border-size, 1px) solid var(--tabs--tab-border_colour, #1d42a6);
  flex: none;
  max-width: 100%; /* Prevent a single tab from stretching excessively wide */
  display: flex;
  overflow: hidden; /* Prevent text overflow */

  &:last-child {
    border-right: none;
  }
}

/* ============================================
   Tab Button
   ============================================ */
.oxfcms-tabs__tab-button {
  padding: var(--tabs--padding, 0.5rem 1rem);
  font-size: var(--tabs--font_size, 1rem);
  font-weight: var(--tabs--font_weight, 700);
  font-family: var(--tabs--font_family, 'Roboto', sans-serif);
  border: none;
  color: var(--tabs--tab-text, #1d42a6);
  background-color: var(--tabs--tab-background, transparent);
  cursor: pointer;
  flex: 1 1 auto;
  min-width: 0;
  height: 100%;
  max-width: 100%; /* Ensure button respects parent width */
  display: flex;
  align-items: center;
  justify-content: center;
  text-align: center;
  transition: background-color 0.2s ease, color 0.2s ease;

  &:hover {
    color: var(--tabs--hover--tab-text, #ffffff);
    background-color: var(--tabs--hover--tab-background, #002147);
  }

  &[aria-selected="true"] {
    background-color: var(--tabs--active--tab-background, #1d42a6);
    color: var(--tabs--active--tab-text, #ffffff);

    &:hover {
      color: var(--tabs--hover--tab-text, #ffffff);
      background-color: var(--tabs--hover--tab-background, #002147);
    }
  }

  &:focus-visible {
    outline: 2px solid var(--tabs--tab-border_colour, #1d42a6);
    outline-offset: -2px;
    z-index: 1;
  }
}

/* View mode: keep titles truncated inside tabs. */
.oxfcms-tabs-layout:not(.oxfcms-tabs-layout--edit-mode) {
  .oxfcms-tabs__tab-button {
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
  }
}

/* ============================================
   Tab Panels
   ============================================ */
.oxfcms-tabs__panels {
  margin-top: 0;
}

.oxfcms-tabs__tab-content {
  padding: var(--space-md, 1rem) 0;
  border: none;
  border-radius: 0;

  &.hidden {
    display: none;
  }
}

.oxfcms-tabs__tab-content-inner {
  padding: 0 var(--space-md, 1rem);
}

/* ============================================
   Tooltip
   ============================================ */
.oxfcms-tooltip {
  position: fixed;
  z-index: 9999;
  background-color: var(--tabs--tooltip-background);
  color: var(--tabs--tooltip-text);
  padding: var(--tabs--tooltip-padding);
  border-radius: var(--tabs--tooltip-border-radius);
  font-size: var(--tabs--tooltip-font-size);
  font-family: var(--tabs--font_family, inherit);
  font-weight: var(--tabs--tooltip-font-weight, 500);
  pointer-events: none;
  transform: translateX(-50%) translateY(-100%);
  margin-top: -0.5rem;
  white-space: normal;
  word-wrap: break-word;
  overflow-wrap: break-word;
  hyphens: auto;

  &.hidden {
    display: none;
  }

  .oxfcms-tooltip__arrow {
    position: absolute;
    bottom: -6px;
    left: 50%;
    transform: translateX(-50%);
    width: 0;
    height: 0;
    border-left: 6px solid transparent;
    border-right: 6px solid transparent;
    border-top: 6px solid var(--tabs--tooltip-background);
  }
}

/* ============================================
   No-JS Fallback (Progressive Enhancement)
   ============================================ */
.no-js {
  .oxfcms-tabs__tab-content {
    display: block;

    &.hidden {
      display: block;
    }
  }

  .oxfcms-tabs__stepper {
    display: none;
  }
}

/* ============================================
   Edit Mode Styles (Mercury Editor)
   ============================================ */
.oxfcms-tabs-layout--edit-mode {
  .oxfcms-tab {
    position: relative;
    display: flex;
    align-items: center;
    gap: 0;
  }

  .oxfcms-tabs__tab-button {
    flex: 1 1 auto;
    width: auto;
    height: auto;
    white-space: normal;
    overflow: visible;
    text-overflow: clip;
    justify-content: flex-start;
    text-align: left;
    border-top-left-radius: 0;
    border-bottom-left-radius: 0;
    padding-left: 12px;
  }

  /* Controls inline within the tab (edit mode) */
  .me-dynamic-regions-layout__btn-group {
    padding: 0 8px;
    background-color: transparent;
    border-radius: 0;
    position: static;
    display: flex;
    flex-direction: row;
    align-items: center;
    transform: none;
    opacity: 1;
    gap: 4px;
    border: none;
    justify-content: center;
    z-index: 100;
    box-shadow: none;
    margin-left: auto;
    transition: background-color 0.2s ease;
    height: 100%;
    align-self: stretch;
  }

  /* Button group background inherits tab hover state */
  .oxfcms-tab:hover .me-dynamic-regions-layout__btn-group {
    background-color: var(--tabs--hover--tab-background, #002147);
  }

  /* Active tab button group background */
  .oxfcms-tab:has([aria-selected="true"]) .me-dynamic-regions-layout__btn-group {
    background-color: var(--tabs--active--tab-background, #1d42a6);
  }

  /* Dragging state */
  .oxfcms-tab.dragging {
    opacity: 0.5;
    cursor: grabbing;
  }

  .oxfcms-tab[draggable="true"] {
    cursor: move;
  }

  /* Mercury defaults to showing the "Add" button only on hover; keep it always visible in edit mode. */
  .me-dynamic-regions-layout-btn--add {
    opacity: 1 !important;
  }

  /* Drag handle styling - integrated with tab */
  .oxfcms-tabs__drag-handle {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 36px;
    min-width: 36px;
    height: 100%;
    color: #9ca3af;
    cursor: move;
    cursor: grab;
    background: var(--tabs--tab-background, transparent);
    transition: all 0.15s ease-in-out;
    flex-shrink: 0;
    order: -1;

    &:hover {
      background: rgba(0, 0, 0, 0.03);
      color: #6b7280;
    }

    &:active {
      cursor: grabbing;
      background: rgba(0, 0, 0, 0.05);
    }

    svg {
      pointer-events: none;
    }
  }

  /* Drag handle inherits tab hover state */
  .oxfcms-tab:hover .oxfcms-tabs__drag-handle {
    background-color: var(--tabs--hover--tab-background, #002147);
    color: rgba(255, 255, 255, 0.9);
  }

  /* Active tab drag handle */
  .oxfcms-tab:has([aria-selected="true"]) .oxfcms-tabs__drag-handle {
    background: var(--tabs--active--tab-background, #1d42a6);
    color: rgba(255, 255, 255, 0.7);

    &:hover {
      background: var(--tabs--hover--tab-background, #002147);
      color: rgba(255, 255, 255, 0.9);
    }
  }

  /* Edit button styling */
  .me-dynamic-regions-layout-btn--edit {
    appearance: none;
    background-color: #0073e6 !important;
    background-image: url("data:image/svg+xml,%3Csvg width='30' height='30' viewBox='0 0 30 30' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M18.284 8.63082L19.6136 7.30121C20.0152 6.8996 20.6664 6.8996 21.068 7.30121L22.6988 8.93203C23.1004 9.33365 23.1004 9.98479 22.6988 10.3864L21.3692 11.716L18.284 8.63082Z' fill='%23ffffff'/%3E%3Cpath d='M17.2556 9.65922L9.0284 17.8864L8 22L12.1136 20.9716L20.3408 12.7444L17.2556 9.65922Z' fill='%23ffffff'/%3E%3C/svg%3E%0A") !important;
    background-size: cover !important;
    background-position: center !important;
    border: 1px solid #0073e6 !important;
    border-radius: 4px !important;
    cursor: pointer;
    transition: all 0.15s ease-in-out;
    box-shadow: 0 1px 2px rgba(0, 0, 0, 0.1);
    height: 30px !important;
    width: 30px !important;
    min-width: 30px !important;
    padding: 0 !important;
    margin: 0 !important;
    opacity: 1 !important;
    text-indent: -10000px;

    &:hover {
      background-color: #0069d9 !important;
      background-image: url("data:image/svg+xml,%3Csvg width='30' height='30' viewBox='0 0 30 30' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M18.284 8.63082L19.6136 7.30121C20.0152 6.8996 20.6664 6.8996 21.068 7.30121L22.6988 8.93203C23.1004 9.33365 23.1004 9.98479 22.6988 10.3864L21.3692 11.716L18.284 8.63082Z' fill='%23ffffff'/%3E%3Cpath d='M17.2556 9.65922L9.0284 17.8864L8 22L12.1136 20.9716L20.3408 12.7444L17.2556 9.65922Z' fill='%23ffffff'/%3E%3C/svg%3E%0A") !important;
      border-color: #0069d9 !important;
      box-shadow: 0 2px 4px rgba(0, 0, 0, 0.15);
    }

    &:focus-visible {
      outline: 2px solid #26a769 !important;
      outline-offset: 2px;
    }

    &:active {
      transform: translateY(1px);
      box-shadow: 0 1px 2px rgba(0, 0, 0, 0.1);
    }
  }

  /* Delete/Remove button styling */
  .me-dynamic-regions-layout-btn--delete {
    appearance: none;
    background-color: #0073e6 !important;
    background-image: url("data:image/svg+xml,%3Csvg width='30' height='30' viewBox='0 0 30 30' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath fill-rule='evenodd' clip-rule='evenodd' d='M14 8H16C16.5523 8 17 8.44772 17 9H21V11H9V9H13C13 8.44772 13.4477 8 14 8ZM10 12H20L19.09 21.0995C19.0389 21.6107 18.6088 22 18.095 22H11.905C11.3912 22 10.9611 21.6107 10.91 21.0995L10 12Z' fill='%23ffffff'/%3E%3C/svg%3E%0A") !important;
    background-size: cover !important;
    background-position: center !important;
    border: 1px solid #0073e6 !important;
    border-radius: 4px !important;
    cursor: pointer;
    transition: all 0.15s ease-in-out;
    box-shadow: 0 1px 2px rgba(0, 0, 0, 0.1);
    height: 30px !important;
    width: 30px !important;
    min-width: 30px !important;
    padding: 0 !important;
    margin: 0 !important;
    opacity: 1 !important;
    text-indent: -10000px;

    &:hover {
      background-color: #0069d9 !important;
      background-image: url("data:image/svg+xml,%3Csvg width='30' height='30' viewBox='0 0 30 30' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath fill-rule='evenodd' clip-rule='evenodd' d='M14 8H16C16.5523 8 17 8.44772 17 9H21V11H9V9H13C13 8.44772 13.4477 8 14 8ZM10 12H20L19.09 21.0995C19.0389 21.6107 18.6088 22 18.095 22H11.905C11.3912 22 10.9611 21.6107 10.91 21.0995L10 12Z' fill='%23ffffff'/%3E%3C/svg%3E%0A") !important;
      border-color: #0069d9 !important;
      box-shadow: 0 2px 4px rgba(0, 0, 0, 0.15);
    }

    &:focus-visible {
      outline: 2px solid #26a769 !important;
      outline-offset: 2px;
    }

    &:active {
      transform: translateY(1px);
      box-shadow: 0 1px 2px rgba(0, 0, 0, 0.05);
    }
  }
}

.oxfcms-tabs__add-button {
  display: flex;
  align-items: center;
  padding: 0 0.5rem;
}

/* Hide Mercury edit controls unless parent paragraph is active */
.js-lpb-component:not([data-active="true"]) .mercury-editor-ui,
.js-lpb-component:not([data-active="true"]) > .lpb-controls,
.js-lpb-component:not([data-active="true"]) .oxfcms-tabs__drag-handle {
  display: none !important;
}

/* Show controls only when oxfcms-tabs is directly in active component (not nested in child component) */
.js-lpb-component[data-active="true"]:not(:has(.js-lpb-component .oxfcms-tabs)) .oxfcms-tabs .mercury-editor-ui,
.js-lpb-component[data-active="true"]:not(:has(.js-lpb-component .oxfcms-tabs)) .oxfcms-tabs .oxfcms-tabs__drag-handle {
  display: flex !important;
}

/* Show accordion controls when hovering */
.me-accordion__heading:hover .me-dynamic-regions-layout__btn-group {
  display: flex !important;
}

.oxfcms-tabs__limit-message {
  display: flex;
  align-items: center;
  padding: 0.5rem 1rem;
  background-color: #fef3cd;
  color: #856404;
  font-size: 0.875rem;
  border-radius: var(--tabs--border-radius-size, 10px);
}

/* ============================================
   Breakpoints
   ============================================ */
@media (width < 1280px) {
  :root {
    /* 1280 breakpoint sizing (Figma) */
    --tabs--stepper-width: 54px;
    --tabs--stepper-border-radius: 5px;
    --tabs--stepper-icon-size: 20px;
    --tabs--border-radius-size: 10px;
    --tabs--font_size: 20px;
    --tabs--padding: 15px 20px;
  }
}

@media (width < 768px) {
  :root {
    /* 768 breakpoint sizing (Figma) */
    --tabs--stepper-width: 50px;
    --tabs--stepper-border-radius: 5px;
    --tabs--stepper-icon-size: 18px;
    --tabs--border-radius-size: 9px;
    --tabs--font_size: 18px;
    --tabs--padding: 14px 18px;
  }
}