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

@import url("./styles/cpd-button.css");
@import url("./styles/cpd-form.css");
@import url("./styles/cpd-link.css");
@import url("./styles/cpd-text-control.css");
@import url("./styles/cpd-mfa-control.css");
@import url("./styles/cpd-checkbox-control.css");

@import url("./components/SessionCard/SessionCard.module.css");
@import url("./components/Session/DeviceTypeIcon.module.css");
@import url("./components/Layout/Layout.module.css");
@import url("./components/Footer/Footer.module.css");
@import url("./components/PageHeading/PageHeading.module.css");

.cpd-text-body-lg-regular {
  font: var(--cpd-font-body-lg-regular);
  letter-spacing: var(--cpd-font-letter-spacing-body-lg);
}

.cpd-text-heading-xl-semibold {
  font: var(--cpd-font-heading-xl-semibold);
  letter-spacing: var(--cpd-font-letter-spacing-heading-xl);
}

.cpd-text-body-md-regular {
  font: var(--cpd-font-body-md-regular);
  letter-spacing: var(--cpd-font-letter-spacing-body-md);
}

.cpd-text-primary {
  color: var(--cpd-color-text-primary);
}

.cpd-text-secondary {
  color: var(--cpd-color-text-secondary);
}

.captcha-noscript {
  color: var(--cpd-color-text-critical-primary);
  font: var(--cpd-font-body-md-semibold);
  letter-spacing: var(--cpd-font-letter-spacing-body-md);
  background-color: var(--cpd-color-bg-critical-subtle);
  border: 1px solid var(--cpd-color-border-critical-subtle);
  border-radius: var(--cpd-space-2x);
  text-align: justify;
  padding: var(--cpd-space-4x);
}

.consent-client-icon {
  display: block;
  height: var(--cpd-space-16x);
  width: var(--cpd-space-16x);
  margin: 0 auto;

  &.generic {
    background-color: var(--cpd-color-bg-subtle-secondary);
    border-radius: var(--cpd-radius-pill-effect);
    color: var(--cpd-color-icon-primary);

    & svg {
      margin: var(--cpd-space-4x);
      height: var(--cpd-space-8x);
      width: var(--cpd-space-8x);
    }
  }

  &.image {
    height: var(--cpd-space-16x);
    width: var(--cpd-space-16x);
    border-radius: var(--cpd-space-2x);
    overflow: hidden;
  }
}

.consent-scope-list {
  --border-radius: var(--cpd-space-4x);

  & ul {
    display: flex;
    flex-direction: column;
    gap: var(--cpd-space-1x);

    & > li {
      font: var(--cpd-font-body-md-regular);
      letter-spacing: var(--cpd-font-letter-spacing-body-md);
      color: var(--cpd-color-text-primary);

      background-color: var(--cpd-color-bg-subtle-secondary);
      padding: var(--cpd-space-3x) var(--cpd-space-5x);
      display: flex;
      gap: var(--cpd-space-4x);
      line-height: var(--cpd-space-6x);

      &:first-of-type {
        border-top-left-radius: var(--border-radius);
        border-top-right-radius: var(--border-radius);
      }

      &:last-of-type {
        border-bottom-left-radius: var(--border-radius);
        border-bottom-right-radius: var(--border-radius);
      }

      & > p {
        flex: 1;
      }

      & > svg {
        display: block;
        height: var(--cpd-space-6x);
        width: var(--cpd-space-6x);
        color: var(--cpd-color-icon-quaternary);
      }
    }
  }
}

.separator {
  display: flex;
  align-items: center;

  & hr {
    flex: 1;
    border: none;
    border-top: 1px solid var(--cpd-color-bg-subtle-primary);
  }

  & p {
    margin-inline: var(--cpd-space-4x);
    text-transform: uppercase;
    font: var(--cpd-font-body-md-regular);
    letter-spacing: var(--cpd-font-letter-spacing-body-md);
    color: var(--cpd-color-text-primary);
  }
}