// Lightning Design System 2.29.1
// Copyright (c) 2015-present, salesforce.com, inc. All rights reserved
// Licensed under BSD 3-Clause - see LICENSE.txt or git.io/sfdc-license

@import 'deprecate';

/**
 * @summary Wrapper of split view
 *
 * @name base
 * @selector .slds-split-view_container
 * @restrict div
 * @support dev-ready
 * @variant
 */
.slds-split-view_container {
  position: relative;
  display: flex;
  flex-direction: column;
  min-width: 0;

  /**
   * @summary Modifier to rotate the left arrow icon on close
   * @selector .slds-is-closed
   * @restrict .slds-split-view_container, .slds-split-view__toggle-button
   * @modifier
   * @group toggle
   */
  &.slds-is-closed {

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

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

  /**
   * @summary Toggles open/close state of split view container
   * @selector .slds-is-open
   * @restrict .slds-split-view_container, .slds-split-view__toggle-button
   * @modifier
   * @group toggle
   */
  &.slds-is-open {
    flex: 1 1 auto;

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

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

/**
 * @selector .slds-split-view
 * @restrict .slds-split-view_container article
 */
.slds-split-view {
  background: var(--slds-g-color-neutral-base-95, #{$split-view-color-background});
  color: var(--slds-g-color-neutral-base-30, #{$color-text-weak});
}

/**
 * @summary Header of split view
 * @selector .slds-split-view__header
 * @restrict .slds-split-view header
 * @notes Contains elements such as the list filter, view switcher and refresh button
 */
.slds-split-view__header {
  padding: $var-spacing-vertical-medium $var-spacing-horizontal-medium $spacing-x-small $var-spacing-horizontal-large;
}

/**
 * @summary Column headers
 * @selector .slds-split-view__list-header
 * @restrict .slds-split-view div
 */
.slds-split-view__list-header {
  @include text-title;
  line-height: $line-height-heading;
  border: {
    top: $border-width-thin solid var(--slds-g-color-border-base-1, #{$split-view-color-border});
    bottom: $border-width-thin solid var(--slds-g-color-border-base-1, #{$split-view-color-border});
  }
  padding: $spacing-x-small $spacing-medium $spacing-x-small $spacing-large;
}

/**
 * @summary Each row of the list of split view
 * @selector .slds-split-view__list-item
 * @restrict .slds-split-view li
 */
.slds-split-view__list-item {
  display: flex;
  position: relative;
  border-bottom: $border-width-thin solid var(--slds-g-color-border-base-1, #{$split-view-color-border});
  font-size: $font-size-2;

  &:hover,
  &:focus {
    background: var(--slds-g-color-neutral-base-100, #{$split-view-color-background-row-hover});
  }

  .slds-indicator_unread,
  .slds-indicator--unread {
    background: var(--slds-g-color-brand-base-50, #{$color-brand});
  }
}

/**
 * @summary Unread states
 * @selector .slds-indicator_unread
 * @restrict .slds-split-view__list-item abbr
 */
.slds-indicator_unread,
.slds-indicator--unread {
  @include square(8px);
  position: absolute;
  top: $spacing-medium;
  left: $spacing-x-small;
  display: block;
  border-radius: $border-radius-circle;
  background: var(--slds-g-color-error-base-40, #{$color-background-notification-badge});
}

/**
 * @summary Actionable row of split view
 * @selector .slds-split-view__list-item-action
 * @restrict .slds-split-view__list-item a
 */
.slds-split-view__list-item-action {
  color: currentColor;
  padding: $var-spacing-vertical-small $var-spacing-horizontal-medium $var-spacing-vertical-small $var-spacing-horizontal-large;

  &:hover,
  &:focus {
    outline: none;
    background: var(--slds-g-color-neutral-base-100, #{$split-view-color-background-row-hover});
    color: currentColor;
    text-decoration: none;
  }

  &:focus {
    box-shadow: var(--slds-g-shadow-inset-focus-1, #{$shadow-button-focus}); 
  }

  &[aria-current="page"] {
    box-shadow: inset 4px 0 0 $brand-accessible;

    &:focus {
      box-shadow: inset 4px 0 0 $brand-accessible,
        0 0 0 2px var(--slds-g-color-brand-base-40, #{$palette-blue-40}) inset,
        0 0 0 4px var(--slds-g-color-neutral-base-100, #{$palette-neutral-100}) inset;
    }
  }
}

/**
 * @summary Expand/Collapse button to toggle open/close state of split view
 * @selector .slds-split-view__toggle-button
 * @restrict .slds-split-view_container button
 */
.slds-split-view__toggle-button {
  position: absolute;
  right: (0.75rem * -1);
  height: 100%;
  width: 0.75rem;
  background: var(--slds-g-color-neutral-base-100, #{$color-background-alt});
  border-radius: 0;
  border: $border-width-thin solid var(--slds-g-color-neutral-base-50, #{$color-border});

  &:hover,
  &:focus {
    background: var(--slds-g-color-neutral-base-100, #{$split-view-color-background-row-hover});
  }

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

  &:focus {
    z-index: 1;
  }
}