@import "./Common.scss";

.buttonpad {
  --buttonpad--color-background: var(--potzblitz--color-background);
  --buttonpad--color-foreground: var(--potzblitz--color-foreground);
  --buttonpad--color-hover-background: var(--potzblitz--color-foreground);
  --buttonpad--color-hover-foreground: var(--potzblitz--color-background);
  --buttonpad--color-border: var(--potzblitz--color-foreground);
  --buttonpad--border-width: 2px;
  --buttonpad--button-size: 12px;
  --buttonpad--padding: 12px;
  --buttonpad--buttons-gap: 6px;
  --buttonpad--border-radius: 12px;
  --buttonpad--font: Monospace;

  display: flex;
  flex-direction: row;
  flex-grow: 1;
  height: 100%;
  gap: 10px;

  label {
    @include LabelStyle;
  }

  .pad {
    flex-grow: 1;
    display: grid;
    justify-self: center;
    align-self: center;
    justify-content: center;
    align-items: center;
    gap: var(--buttonpad--buttons-gap);
    padding: var(--buttonpad--padding);
    box-sizing: border-box;
    button[class^="button"] {
      width: var(--buttonpad--button-size);
      height: var(--buttonpad--button-size);
      padding: 0;
      background: var(--buttonpad--color-background);
      border-radius: var(--buttonpad--border-radius);
      outline: 2px solid var(--buttonpad--color-border);
      &.active {
        background: var(--buttonpad--color-foreground);
      }
    }
  }
}