@mixin app-card-theme($theme) {
  $primary: map-get($theme, primary);
  $background: map-get($theme, background);
  $foreground: map-get($theme, foreground);
  $accent: map-get($theme, accent);
  $is-dark-theme: map-get($theme, is-dark);
  $accent-color: map-get($primary, 500);
  $back: map-get($background, background);

  .cnsl-app-card {
    padding: 1rem;
    box-sizing: border-box;
    cursor: pointer;
    animation: all 0.2s;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    font-size: 2rem;
    height: 80px;
    width: 80px;
    text-transform: uppercase;
    border-radius: 0.5rem;
    font-weight: 600;
    background-color: $back;
    transition: background-color box-shadow 0.3s ease-in;
    color: map-get($primary, default-contrast);

    &.add {
      background-color: map-get($primary, 500);
    }

    &.web {
      background: linear-gradient(40deg, #059669 30%, #047857);
      border: none;
      color: #fff;
    }

    &.native {
      background: linear-gradient(40deg, #306ccc 30%, #4f46e5);
      border: none;
      color: #fff;
    }

    &.useragent {
      background: linear-gradient(40deg, #dc2626 30%, #db2777);
      border: none;
      color: #fff;
    }

    &.api {
      background: linear-gradient(40deg, #1f2937, #111827);
      border: none;
      color: #fff;
    }

    &.saml {
      background: linear-gradient(40deg, rgb(110, 56, 124), rgb(88, 37, 103));
      border: none;
      color: #fff;
    }
  }
}