Pq234/robot-learning-tutorial

1button, .button {2    appearance: none;3    background: linear-gradient(15deg, var(--primary-color) 0%, var(--primary-color-hover) 35%);4    color: white;5    border: 1px solid transparent;6    border-radius: var(--button-radius);7    padding: var(--button-padding-y) var(--button-padding-x);8    font-size: var(--button-font-size);9    line-height: 1;10    cursor: pointer;11    display: inline-block;12    text-decoration: none;13    transition: background-color .15s ease, border-color .15s ease, box-shadow .15s ease, transform .02s ease;14  }15  /* Icon-only buttons: equal X/Y padding */16  button:has(> svg:only-child),17  .button:has(> svg:only-child) {18    padding: var(--button-icon-padding);19  }20  button:hover, .button:hover {21    filter: brightness(96%);22  }23  button:active, .button:active {24    transform: translateY(1px);25  }26  button:focus-visible, .button:focus-visible {27    outline: none;28  }29  button:disabled, .button:disabled {30    opacity: .6;31    cursor: not-allowed;32  }33  34  /* Ghost/Muted button: subtle outline, primary color text/border */35  .button--ghost {36    background: transparent !important;37    color: var(--primary-color) !important;38    border-color: var(--primary-color) !important;39  }40  .button--ghost:hover {41    color: var(--primary-color-hover) !important;42    border-color: var(--primary-color-hover) !important;43    filter: none;44  }45  46  /* Big button: larger padding and font size */47  .button.button--big {48    padding: var(--button-big-padding-y) var(--button-big-padding-x);49    font-size: var(--button-big-font-size);50  }51  .button.button--big:has(> svg:only-child) {52    padding: var(--button-big-icon-padding);53  }54  55  .button-group .button {56    margin: 5px;57  }58