/* Copyright 2024, 2025 New Vector Ltd.
 * Copyright 2024 The Matrix.org Foundation C.I.C.
 *
 * SPDX-License-Identifier: AGPL-3.0-only OR LicenseRef-Element-Commercial
 * Please see LICENSE files in the repository root for full details.
 */

.session-card-root {
  position: relative;
}

@media screen and (min-width: 768px) {
  .session-card-root:has(.action) .session-card .card-header {
    /* We can't exactly know the width of the action button,
         * so we use a somewhat arbitrary safe value:
         *  - the button padding is 4x + 5x
         *  - the icon is 5x wide
         *  - a 2x safe margin
         *  - the approximate width of the button text "Sign out"
         *
         *  Of course that depends on the translation, but it's a good start
         */
    padding-inline-end: calc(var(--cpd-space-16x) + 10ch);
  }
}

@media screen and (max-width: 767px) {
  .session-card-root:has(.action) .session-card {
    /* On small screen, the action button is at the bottom, and we can accurately
         * calculate the height of the button:
         *
         *  - the button padding is 1x + 1x
         *  - its line height is 6.5x
         *  - plus 2x 1px of border (so 0.5x)
         *  - the 4x margin on top of the button
         *  - the regular 6x padding
         */
    padding-block-end: calc(
      var(--cpd-space-9x) +
      var(--cpd-space-6x) +
      var(--cpd-space-6x)
    );
  }
}

.session-card {
  display: flex;
  gap: var(--cpd-space-4x);
  flex-direction: column;
  text-align: start;

  border-radius: var(--cpd-space-4x);
  background-color: var(--cpd-color-bg-canvas-default);
  outline: 1px solid var(--cpd-color-border-interactive-secondary);
  outline-offset: -1px;
  box-shadow: 0px 1.2px 2.4px 0px rgba(0, 0, 0, 0.15);
  padding: var(--cpd-space-6x);

  &.disabled {
    outline-color: var(--cpd-color-border-disabled);
    background-color: var(--cpd-color-bg-canvas-disabled);
    box-shadow: none;
  }

  &.compact {
    box-shadow: none;
    padding: var(--cpd-space-3x);
  }

  & .card-header {
    display: flex;
    gap: var(--cpd-space-4x);
    align-items: center;

    & .content {
      display: flex;
      flex-direction: column;

      /* This makes sure it can shrink, and that the text doesn't overflow */
      flex: 0 1 auto;
      min-width: 0;

      &.auto div:first-child,
      & .name {
        overflow: hidden;
        white-space: nowrap;
        text-overflow: ellipsis;
        font: var(--cpd-font-body-md-semibold);
        letter-spacing: var(--cpd-font-letter-spacing-body-md);
        color: var(--cpd-color-text-primary);
      }

      &.auto div:not(:first-child),
      & .client {
        overflow: hidden;
        white-space: nowrap;
        text-overflow: ellipsis;
        font: var(--cpd-font-body-sm-regular);
        letter-spacing: var(--cpd-font-letter-spacing-body-sm);
        color: var(--cpd-color-text-secondary);

        & img {
          margin-inline-end: var(--cpd-space-1x);
        }
      }
    }
  }

  & .metadata {
    display: flex;
    flex-wrap: wrap;
    gap: var(--cpd-space-4x) var(--cpd-space-10x);

    & > * {
      min-width: 0;
    }

    & .key {
      font: var(--cpd-font-body-sm-regular);
      letter-spacing: var(--cpd-font-letter-spacing-body-sm);
      color: var(--cpd-color-text-secondary);
    }

    & .value {
      font: var(--cpd-font-body-md-regular);
      letter-spacing: var(--cpd-font-letter-spacing-body-md);
      color: var(--cpd-color-text-primary);
      overflow: hidden;
      text-overflow: ellipsis;
    }
  }
}

a.session-card:not(.disabled) {
  transition-property: outline-color, box-shadow;
  transition-duration: 0.1s;
  transition-timing-function: linear;

  &:hover,
  &:focus-visible {
    box-shadow: none;
    outline: 2px solid var(--cpd-color-border-interactive-hovered);
    outline-offset: -2px;
  }

  &:focus-visible {
    outline-color: var(--cpd-color-border-focused);
  }
}

.session-card-root {
  @media screen and (min-width: 768px) {
    .action {
      position: absolute;
      /* This padding creates a safe area for the action button */
      padding: var(--cpd-space-6x) var(--cpd-space-6x) var(--cpd-space-2x)
        var(--cpd-space-2x);
      inset-block-start: 0;
      inset-inline-end: 0;
    }
  }

  @media screen and (max-width: 767px) {
    .action {
      display: flex;
      flex-direction: column;
      position: absolute;
      padding: var(--cpd-space-6x);
      inset-block-end: 0;
      inset-inline: 0;
    }
  }
}
