buttons.module.css

.Button {
  transition: all 100ms ease-out;
  /* Button format and layout */
  border: none;
  position: relative;
  display: inline-flex;
  max-width: fit-content;
  flex-grow: 0;
  -webkit-tap-highlight-color: rgba(0,0,0,0);

  padding: 6px 8px;
  justify-content: center;
  align-items: center;
  gap: 4px;
  background: #FFF;

  box-shadow: 6px 6px 0 0 rgba(0, 0, 0, 0.5);
  outline: solid 1px rgba(255,255,255, 0.25);

  /* Text format */
  text-decoration: none;
  color: #000;
  font-size: 1em;
  font-weight: 500;
  line-height: normal;
  text-align: left;
}

.Button:not([aria-disabled="true"]):focus-visible {
  outline: solid 2px rgb(var(--focus));
  outline-offset: 4px;
}

@supports not selector(:focus-visible) {
  .Button:not([aria-disabled="true"]):focus {
    outline: solid 2px rgb(var(--focus));
    outline-offset: 4px;
  }
}

.Button:not([aria-disabled="true"]):hover {
  transform: translate(-2px, -2px);
  box-shadow: 8px 8px black;
}

.Button:not([aria-disabled="true"]):active {
  transform: translate(0);
  box-shadow: none;
}


.Clickable {
  font: unset;
  text-align: unset;
  cursor: pointer;
  background: unset;
  border: unset;
  color: unset;

  -webkit-tap-highlight-color: rgba(0,0,0,0);
  transition: all 200ms cubic-bezier(0.24, 0.89, 0.57, 1.58);
}

.Clickable:focus-visible {
  outline: solid 2px rgb(var(--focus));
  outline-offset: 4px;
}

@supports not selector(:focus-visible) {
  .Clickable:focus {
    outline: solid 2px rgb(var(--focus));
    outline-offset: 4px;
  }
}

.Clickable:hover p, .Clickable:hover h3 {
  text-decoration: underline;

  -webkit-tap-highlight-color: rgba(0,0,0,0);
  transition: all 200ms cubic-bezier(0.24, 0.89, 0.57, 1.58);
}

@media (hover: hover) {
  .Clickable:hover {
    transform: scale(1.02);
  }
}

.Clickable:active {
  transform: scale(0.96);
}


.iconic {
  display: flex;
  align-items: center;
  padding: 0 6px;
  aspect-ratio: 1;
  font-size: 16px;
  font-weight: 500;
  font-family: inherit;
  color: black;
  background-color: white;
  border: none;
  border-radius: 50%;
  text-align: center;
  text-decoration: none;
  cursor: pointer;
  transition: background-color 100ms, border 100ms, box-shadow 100ms, transform 100ms;
  outline: none;
  line-height: 1;
}

.iconic:hover {
  background-color: rgb(223, 223, 223);
}

.iconic:active {
  background-color: rgb(179, 179, 179);
}

.iconic:focus {
  outline: 2px solid var(--focus);
  /*background-color: var(--slate-a5);*/
  outline-offset: 2px;
}

/*.iconic:disabled,*/
/*.iconic[aria-disabled="true"] {*/
/*  background-color: var(--slate-a2);*/
/*  !*border: 1px solid var(--slate-a2);*!*/
/*  cursor: not-allowed;*/
/*  box-shadow: none;*/
/*  color: var(--slate-8);*/
/*}*/

/*.iconic:disabled:hover,*/
/*.iconic[aria-disabled="true"]:hover {*/
/*  !*background-color: var(--indigo-a6);*!*/
/*  !*border-color: var(--indigo-a6);*!*/
/*  box-shadow: none;*/
/*}*/

/*.iconic:disabled:active,*/
/*.iconic[aria-disabled="true"]:active {*/
/*  transform: none;*/
/*  box-shadow: none;*/
/*}*/