#settings-license-tab {
  #license-main-card {
    padding: var(--spacing-lg);
  }
}

#license-plans {
  padding: var(--spacing-lg) var(--spacing-xl);

  header {
    display: flex;
    flex-flow: row;
    align-items: center;
    gap: var(--spacing-md);

    & > a {
      margin-left: auto;
    }
  }

  .license-item {
    & > .track {
      display: grid;
      grid-template-columns: 68px 1fr;
      grid-template-rows: 1fr;
      column-gap: var(--spacing-xl);

      .image-track {
        display: flex;
        flex-flow: column;
        align-items: flex-start;
        justify-content: flex-start;
        overflow: hidden;

        img {
          width: 100%;
        }
      }

      & > .content {
        display: flex;
        flex-flow: column;

        .top {
          width: 100%;
          display: flex;
          flex-flow: row nowrap;
          align-items: center;
          justify-content: flex-start;
          column-gap: var(--spacing-md);

          .title {
            font: var(--t-body-primary-500);
            color: var(--fg-default);
          }
        }

        .description {
          font: var(--t-body-sm-400);
          color: var(--fg-muted);
        }

        .promotional-copy {
          font: var(--t-body-sm-600);
          color: var(--fg-success);
        }

        .actions {
          display: flex;
          flex-flow: row wrap;
          gap: var(--spacing-md);
        }
      }
    }
  }
}

#license-expired-notice {
  padding: var(--spacing-lg) var(--spacing-xl);

  .notice-track {
    display: grid;
    grid-template-columns: 68px 1fr;
    gap: var(--spacing-xl);
    align-items: start;

    .image-track {
      img {
        width: 100%;
      }
    }

    .content-track {
      display: flex;
      flex-flow: column;
      align-items: flex-start;

      .title {
        color: var(--fg-critical);
        font: var(--t-title-h5);
      }

      .description {
        color: var(--fg-default);
        font: var(--t-body-primary-400);
      }
    }
  }
}
