styles property

Implementation

@css
static List<StyleRule> get styles => [
  css('.github-button', [
    css('&').styles(
      display: Display.flex,
      padding: Padding.symmetric(horizontal: 0.7.rem, vertical: 0.4.rem),
      radius: BorderRadius.circular(8.px),
      alignItems: AlignItems.center,
      gap: Gap(column: .5.rem),
      fontSize: 0.7.rem,
      textDecoration: TextDecoration.none,
      lineHeight: 1.2.em,
    ),
    css('&:hover').styles(backgroundColor: Color('color-mix(in srgb, currentColor 5%, transparent)')),
    css('& *').styles(transition: Transition('opacity', duration: 200, curve: Curve.easeInOut)),
    css('&:hover *').styles(raw: {'opacity': '1 !important'}),
    css('.github-icon').styles(width: 1.2.rem),
    css('.github-info', [
      css('&').styles(display: Display.flex, flexDirection: FlexDirection.column),
      css('& > span:first-child').styles(
        margin: Margin.only(bottom: 2.px),
        opacity: 0.9,
        fontFamily: FontFamily.list([FontFamilies.monospace]),
      ),
      css('& > span:last-child', [
        css('&').styles(
          display: Display.flex,
          opacity: 0.7,
          alignItems: AlignItems.center,
          gap: Gap(column: .3.em),
          fontSize: 0.9.em,
          fontWeight: FontWeight.w800,
        ),
        css('span').styles(fontWeight: FontWeight.w500),
      ]),
    ]),
  ]),
];