.element {
    border-radius: 5px;
    padding: 4px;
    background: inherit;
}

.minimalElement {
    border-radius: 5px;
    background: inherit;
}

.smallElement {
  border-radius: 5px;
  padding: 6px 12px;
  background: inherit;
}

.mediumElement {
  border-radius: 10px;
  padding: 2px 10px;
  background: inherit;
}

.largeElement {
    border-radius: 10px;
    padding: 8px 16px;
    background: inherit;
}

.giantElement {
    border-radius: 10px;
    padding: 20px 32px;
}

.bordered {
    border: 1px solid var(--border-color);
}

.outlined {
    outline: var(--border-color) auto 1px;
}

.bordered-inset {
  box-shadow: inset 0 0 0 1px var(--border-color);
}

.raised {
    background: var(--raised-background-color);
}

.grounded {
    background: var(--background-color);
}

.interactive:not(:disabled) {
    cursor: pointer;
}

.hoverable:hover:not(:disabled) {
    background: var(--hover-background-color);
}

.borderedHoverable:hover:not(:disabled) {
  box-shadow: inset 0 0 0 1px var(--border-color);
}