@drivy/cobalt/utilities.css

Opinionated design system for Drivy's projects.

@import "./styles/core/palette.css";
@import "./styles/core/theme.css";

/* biome-ignore lint/suspicious/noUnknownAtRules: TODO: Use tailwind v4 */
@tailwind base;
/* biome-ignore lint/suspicious/noUnknownAtRules: TODO: Use tailwind v4 */
@tailwind utilities;

@layer base {
  @keyframes c-fade-in {
    from {
      opacity: 0;
    }
    to {
      opacity: 1;
    }
  }
  @keyframes c-fade-out {
    from {
      opacity: 1;
    }
    to {
      opacity: 0;
    }
  }
  @keyframes c-slide-in {
    0% {
      opacity: 0;
      transform: translateY(-32px);
    }
    100% {
      opacity: 1;
      transform: translateY(0);
    }
  }
  @keyframes c-slide-out {
    0% {
      opacity: 1;
      transform: translateY(0);
    }
    100% {
      opacity: 0;
      transform: translateY(-32px);
    }
  }
  @keyframes c-slide-in-from-bottom {
    0% {
      opacity: 0;
      transform: translateY(100%);
    }
    100% {
      opacity: 1;
      transform: translateY(0);
    }
  }
  @keyframes c-slide-out-to-bottom {
    0% {
      opacity: 1;
      transform: translateY(0);
    }
    100% {
      opacity: 0;
      transform: translateY(100%);
    }
  }

  @property --c-state-interactive-color {
    syntax: "<color>";
    inherits: false;
    initial-value: transparent;
  }

  .c-state-interactive-halo {
    position: relative;
    z-index: 1;

    cursor: pointer;
  }

  .c-state-interactive-halo:hover::after {
    @apply c--m-xs c-rounded-xl c-state-interactive;

    position: absolute;

    top: 0;
    right: 0;
    bottom: 0;
    left: 0;

    z-index: -1;

    display: inline-block;

    content: "";
  }

  .c-state-interactive-with-images {
    cursor: pointer;
  }

  .c-state-interactive-with-images:hover .c-state-interactive-image {
    filter: brightness(90%);
  }
}