@use '../colors';

radiobutton {
  radio {
    -gtk-icon-source: -gtk-recolor(url('../assets/symbolic/radio.symbolic.png'));
    -gtk-icon-transform: scale(0);
    color: rgba(255,255,255, .8);
    border: 2px solid rgba(255,255,255,0.05);
    border-radius: 100%;
    padding: 3px;
    min-width: 8px;
    min-height: 8px;

    // TODO: extract transitions into separate directory
    transition: -gtk-icon-transform 200ms;

    &:hover {
      border-color: rgba(255,255,255,0.1);
    }

    &:active, &:checked {
      background: rgba(255,255,255,0.02);
    }

    &:checked {
      -gtk-icon-transform: scale(1);
      border-color: colors.$primary-accent;
    }
  }

  label { padding-left: 5px; }

  &:disabled { opacity: 0.38; }
}
