@ozen-ui/kit/__inner__/cjs/components/Card/Card.css

React component library

.Card {
  position: relative;
  padding: var(--card-padding);
  cursor: var(--card-cursor-style);
  box-sizing: border-box;
  transition:
    background-color var(--transition-default),
    box-shadow var(--transition-default),
    opacity var(--transition-default);
}

  .Card::after {
    transition: border-color var(--transition-default);
  }

  .Card_size_s {
      --card-padding: var(--spacing-s);
    }

  .Card_size_m {
      --card-padding: var(--spacing-m);
    }

  .Card_size_l {
      --card-padding: var(--spacing-l);
    }

  .Card_interactive {
    --card-cursor-style: pointer;
  }

  .Card_borderWidth_s::after, .Card_borderWidth_m::after {
        content: ' ';
        position: absolute;
        inset: 0;
        pointer-events: none;
        border: var(--card-border-width) var(--card-border-style)
          var(--card-border-color);
        border-radius: var(--paper-border-radius);
      }

  .Card_borderWidth_s {
      --card-border-width: var(--border-width-s);
    }

  .Card_borderWidth_m {
      --card-border-width: var(--border-width-m);
    }

  .Card_borderColor_standard {
      --card-border-color: var(--color-border-secondary);
    }

  .Card_borderColor_selected {
      --card-border-color: var(--color-border-action);
    }

  .Card_borderVariant_solid {
      --card-border-style: solid;
    }

  .Card_borderVariant_dashed {
      --card-border-style: dashed;
    }

  .Card_interactive.Card_borderColor_standard:hover {
      --card-border-color: var(--color-border-secondary-hover);
    }

  .Card_interactive.Card_borderColor_standard:active {
      --card-border-color: var(--color-border-secondary-pressed);
    }

  .Card_interactive.Card_borderColor_selected:hover {
      --card-border-color: var(--color-border-action-hover);
    }

  .Card_interactive.Card_borderColor_selected:active {
      --card-border-color: var(--color-border-action-pressed);
    }

  .Card:focus {
    outline: 0;
    box-shadow: var(--shadow-outline-focused);
  }

  .Card:focus:not(:focus-visible) {
    box-shadow: none;
  }

.Card[aria-disabled='true'] {
  --card-border-color: var(--color-border-disabled);
  background-color: var(--color-background-disabled);
  pointer-events: none;
}