/*
 * Copyright (c) 2026, Salesforce, Inc.,
 * All rights reserved.
 * For full license text, see the LICENSE.txt file
 */

/**
 * Wrapper of split view
 */
.slds-split-view_container {
  position: relative;
  display: flex;
  flex-direction: column;
  min-width: 0;
  height: 100%;

  /**
   * Modifier to rotate the left arrow icon on close
   */
  &.slds-is-closed {
    .slds-split-view {
      display: none;
    }

    .slds-split-view__toggle-button .slds-button__icon {
      transform: rotate(180deg);
    }
  }

  /**
   * Toggles open/close state of split view container
   */
  &.slds-is-open {
    flex: 1 1 auto;

    .slds-split-view {
      display: inherit;
    }

    .slds-split-view__toggle-button .slds-button__icon {
      transform: rotate(0);
    }
  }
}

.slds-split-view {
  background: var(--slds-g-color-surface-2);
  color: var(--slds-g-color-on-surface-1);
}

/**
 * Header of split view
 */
.slds-split-view__header {
  padding-block-start: var(--slds-g-spacing-var-block-4);
  padding-block-end: var(--slds-g-spacing-2);
  padding-inline-start: var(--slds-g-spacing-var-inline-5);
  padding-inline-end: var(--slds-g-spacing-var-inline-4);
}

/**
 * Column headers
 */
.slds-split-view__list-header {
  font-size: var(--slds-g-font-scale-1);
  font-weight: var(--slds-g-font-weight-7);
  line-height: var(--slds-g-font-lineheight-2);
  border-block-start: var(--slds-g-sizing-border-1) solid var(--slds-g-color-border-1);
  border-block-end: var(--slds-g-sizing-border-1) solid var(--slds-g-color-border-1);
  padding-block: var(--slds-g-spacing-2);
  padding-inline-start: var(--slds-g-spacing-5);
  padding-inline-end: var(--slds-g-spacing-4);
}

/**
 * Each row of the list of split view
 */
.slds-split-view__list-item {
  display: flex;
  position: relative;
  border-block-end: var(--slds-g-sizing-border-1) solid var(--slds-g-color-border-1);
  font-size: var(--slds-g-font-scale-neg-1);

  &:hover,
  &:focus {
    background: var(--slds-g-color-surface-container-1);
  }

  .slds-indicator_unread,
  .slds-indicator--unread {
    background: var(--slds-g-color-accent-1);
  }
}

/**
 * Unread states
 */
.slds-indicator_unread {
  width: 8px;
  height: 8px;
  position: absolute;
  inset-block-start: var(--slds-g-spacing-4);
  inset-inline-start: var(--slds-g-spacing-2);
  display: block;
  border-radius: var(--slds-g-radius-border-circle);
  background: var(--slds-g-color-error-1);
}

/**
 * Actionable row of split view
 */
.slds-split-view__list-item-action {
  color: currentColor;
  padding-block-start: var(--slds-g-spacing-var-block-3);
  padding-block-end: var(--slds-g-spacing-var-block-2);
  padding-inline-start: var(--slds-g-spacing-var-inline-5);
  padding-inline-end: var(--slds-g-spacing-var-inline-4);

  &:hover,
  &:focus {
    outline: none;
    background: var(--slds-g-color-surface-container-1);
    color: currentColor;
    text-decoration: none;
  }

  &:focus-visible {
    box-shadow: var(--slds-g-shadow-inset-focus-1);
    outline: 0;
  }

  &[aria-current='page'] {
    box-shadow: inset 4px 0 0 var(--slds-g-color-accent-1);

    &:focus {
      box-shadow:
        inset 4px 0 0 var(--slds-g-color-accent-1),
        inset 0 0 0 1px var(--slds-g-color-accent-1);
    }
  }
}

/**
 * Expand/Collapse button to toggle open/close state of split view
 */
.slds-split-view__toggle-button {
  position: absolute;
  inset-inline-end: calc(0.75rem * -1);
  height: 100%;
  width: 0.75rem;
  background: var(--slds-g-color-surface-container-1);
  border-radius: 0;
  border: var(--slds-g-sizing-border-1) solid var(--slds-g-color-border-1);

  &:hover,
  &:focus {
    background: var(--slds-g-color-surface-container-1);
  }

  &.slds-is-closed .slds-button__icon {
    transform: rotate(180deg);
  }
}