@layer components {
  [data-coco][data-component="app-link"] {
    &[data-theme] {
      @apply no-underline hover:underline;
    }

    &[data-underline="true"] {
      @apply underline;
    }

    &[data-underline="false"] {
      @apply no-underline;
    }

    &[data-theme="primary"] {
      @apply app-link-primary;
    }

    &[data-theme="positive"] {
      @apply app-link-positive;
    }

    &[data-theme="negative"] {
      @apply app-link-negative;
    }

    &[data-theme="warning"] {
      @apply app-link-warning;
    }

    &[data-theme="info"] {
      @apply app-link-info;
    }

    &[data-theme="neutral-dark"] {
      @apply app-link-neutral-dark;
    }

    &[data-theme="neutral-light"] {
      @apply app-link-neutral-light;
    }
  }
}

@layer utilities {
  .app-link-primary,
  .app-link-positive {
    @apply text-content-primary active:text-green-700;
  }

  .app-link-negative {
    @apply text-content-negative active:text-red-800;
  }

  .app-link-warning {
    @apply text-content-warning  active:text-amber-800;
  }

  .app-link-info {
    @apply text-content-info active:text-info-800;
  }

  .app-link-neutral-dark {
    @apply text-content-dark-1;
  }

  .app-link-neutral-light {
    @apply text-content-light-1;
  }
}