.RCB-metric-card-wrapper {
  display: flex;
  gap: 16px;
  margin-bottom: 32px;

  .RCB-metric-card-item {
    flex: 1;
    border-radius: 12px;
    padding: 10px;
    position: relative;
    overflow: hidden;
    transition-property: all;
    transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
    transition-duration: 150ms;
    background: hsl(0, 0%, 100%);
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
    border: 1px solid hsl(214, 32%, 91%);
    animation: slide-up 0.5s ease-out;
    width: 52px;
    height: fit-content;

    &:hover {
      box-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.1),
        0 4px 6px -2px rgba(0, 0, 0, 0.05);
    }

    .RCB-metric-data {
      position: relative;
      z-index: 10;
      display: flex;
      align-items: center;
      gap: 10px;

      .RCB-metric-title-icon {
        flex: 0.2;

        .RCB-metric-title-icon-inner {
          width: 35px;
          aspect-ratio: 1;
          padding: 8px;
          border-radius: 12px;
          display: flex;
          align-items: center;
          justify-content: center;
        }
      }

      .RCB-metric-data-value-container {
        flex: 1;
        display: flex;
        flex-direction: column;
        gap: 4px;

        .RCB-metric-title-container {
          display: flex;
          align-items: center;
          justify-content: space-between;

          .RCB-metric-title-text {
            font-size: 0.875rem;
            line-height: 1.25rem;
            color: hsl(215, 16%, 47%);
          }

          .RCB-metric-compare-text {
            display: flex;
            align-items: center;
            gap: 4px;
            padding: 2px 8px;
            border-radius: 9999px;
            font-size: 0.75rem;
            line-height: 1rem;
            font-weight: 500;

            &.positive {
              background-color: #dcfce7;
              color: #15803d;
            }

            &.negative {
              background-color: #fee2e2;
              color: #b91c1c;
            }
          }
        }

        .RCB-metric-value-text {
          font-size: 1.125rem;
          line-height: 1.75rem;
          font-weight: 700;
          color: #0f1729;
          letter-spacing: -0.025em;
        }
      }
    }

    .RCB-bottom-right-circle {
      position: absolute;
      right: -16px;
      bottom: -16px;
      width: 80px;
      height: 80px;
      border-radius: 50%;
      opacity: 0.1;
      background-color: var(--decorative-color, rgb(6, 182, 212));
    }
  }

  @keyframes slide-up {
    from {
      opacity: 0;
      transform: translateY(20px);
    }
    to {
      opacity: 1;
      transform: translateY(0);
    }
  }
}