.external-provider-card {
  box-sizing: border-box;
  padding: var(--spacing-md);
  border: var(--border-1) solid var(--border-disabled);
  border-radius: var(--spacing-lg);

  & > .inner {
    display: grid;
    grid-template-columns: 48px 1fr auto;
    column-gap: var(--spacing-lg);

    & > .icon-track {
      height: 48px;
      width: 48px;

      & > .icon-box {
        height: 48px;
        width: 48px;
        display: flex;
        flex-flow: row;
        align-items: center;
        justify-content: center;
        background-color: var(--bg-default);
        border: 1px solid var(--border-disabled);
        border-radius: var(--spacing-lg);
        box-sizing: border-box;

        &:not(.variant-custom) {
          background-color: var(--bg-white);
        }

        &.variant-custom {
          background-color: var(--bg-action-muted);
        }
      }
    }

    & > .content-track {
      max-width: 530px;

      & > .top {
        display: flex;
        flex-flow: row nowrap;
        align-items: center;
        justify-content: flex-start;
        column-gap: var(--spacing-sm);
        padding-bottom: var(--spacing-sm);
      }

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

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

    & > .action-track {
      display: flex;
      align-items: center;
      justify-content: center;
    }
  }
}
