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

/**
 * Tile cards that contains the app information, the icon and description
 */
.slds-app-launcher__tile {
  display: flex;
  align-items: stretch;
  margin: var(--slds-g-spacing-2) 0;
  border: var(--slds-g-sizing-border-1) solid var(--slds-g-color-border-1);
  border-radius: var(--slds-g-radius-border-2);
  cursor: move;
  background-color: var(--slds-g-color-surface-container-1); /* SLDS2 */

  &:hover,
  &:focus,
  &:active {
    outline: 0;
    border-color: var(--slds-g-color-border-accent-3);
  }

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

  /**
   * Add styles associated with drag and drop of a tile
   */
  &.slds-is-draggable {
    /* Remove bottom padding because the draggable icon is there */
    .slds-app-launcher__tile-figure {
      padding-block-end: var(--slds-g-spacing-1);
    }
  }

  /**
   * Add styles associated with a tile being grabbed in drag and drop interaction
   */
  &.slds-is-grabbed {
    transform: rotate(3deg);
  }
}

/**
 * App image or icon
 */
.slds-app-launcher__tile-figure {
  display: flex;
  flex-direction: column;
  flex-shrink: 0;
  padding: var(--slds-g-spacing-3);
  color: var(--slds-g-color-on-surface-inverse-1);
  border-start-start-radius: var(--slds-g-radius-border-2);
  border-start-end-radius: 0;
  border-end-start-radius: var(--slds-g-radius-border-2);
  border-end-end-radius: 0;
  text-align: center;

  --slds-c-avatar-radius-border: var(--slds-g-radius-border-2);
}

/**
 * App title and description
 */
.slds-app-launcher__tile-body {
  flex: 1 1 auto;
  background: var(--slds-g-color-surface-container-2);
  padding-block: var(--slds-g-spacing-2);
  padding-inline: var(--slds-g-spacing-3);
  border-start-start-radius: 0;
  border-start-end-radius: var(--slds-g-radius-border-2);
  border-end-start-radius: 0;
  border-end-end-radius: var(--slds-g-radius-border-2);
  color: var(--slds-g-color-on-surface-2); /* SLDS2 */
}

/* Icons color */
.slds-app-launcher {
  .slds-modal__header .slds-modal__close {
    .slds-button__icon {
      fill: var(--slds-g-color-on-surface-1);
    }
  }

  .slds-app-launcher__header-search {
    .slds-input-has-icon .slds-input__icon {
      fill: var(--slds-g-color-on-surface-1);
    }
  }

  .slds-app-launcher__tile-figure {
    .slds-button__icon {
      fill: var(--slds-g-color-on-surface-1);
    }
  }
}

/* TODO: deprecated but, slds-modal_stretch doesn't exist. Do we need this?  */
.slds-app-launcher__content {
  flex: 1 1 auto;

  .slds-section__title-action {
    background: transparent;
  }
}