/*
Copyright 2024 New Vector Ltd.

SPDX-License-Identifier: AGPL-3.0-only OR LicenseRef-Element-Commercial
Please see LICENSE files in the repository root for full details.
*/

.content {
  /* 320px + 20px padding left + 20px padding right */
  max-inline-size: 320px;
  border-radius: var(--cpd-space-3x);
  background: var(--cpd-color-bg-action-primary-rest);
  padding: var(--cpd-space-5x) var(--cpd-space-6x);

  /* from figma */
  box-shadow: 0 4px 24px 0 rgb(0 0 0 / 10%);

  /*
  * Grid, we want to have the following layout:
  * ----------------------------------
  * -  ---------------   ----------  -
  * -  | heading     |   |        |  -
  * -  --------------    | button |  -
  * -  ---------------   | button |  -
  * -  | description |   |        |  -
  * -  ---------------   ----------  -
  * ----------------------------------
  */
  display: grid;
  grid-template:
    "header button" auto
    "description button" auto;
  align-items: center;
  column-gap: var(--cpd-space-6x);
}

.header {
  margin: 0;
  color: var(--cpd-color-text-on-solid-primary);
  grid-area: header;
}

.description {
  color: var(--cpd-color-gray-500);
  grid-area: description;
}

.button {
  color: var(--cpd-color-bg-subtle-secondary);
  grid-area: button;
}

.arrow {
  fill: var(--cpd-color-bg-action-primary-rest);
}

@media (forced-colors: active) {
  .content {
    outline: 1px solid transparent;
  }
}