@import '//y14e.github.io/common/stylesheets/common.css';

.stack {
  display: flex;
  flex-direction: column;
  gap: 1.6rem;
}

.buttons {
  align-items: center;
  display: flex;
  gap: 1.6rem;
  &.-vertical {
    align-items: start;
    flex-direction: column;
  }
  :is(a, button) {
    border-radius: 0.4rem;
    font-weight: bold;
    outline-offset: -2px;
    padding: 0.8rem 1.6rem;
    position: relative;
    transition: 0.3s background-color;
    width: fit-content;
    &[aria-keyshortcuts]::after {
      background-color: #fff;
      border-radius: 0.2rem;
      box-shadow:
        0 -0.2rem 0 0.1rem rgb(0 0 0 / 0.15) inset,
        0 0 0 0.1rem rgb(0 0 0 / 0.2),
        0 0.1rem 0.3rem rgb(0 0 0 / 0.2);
      color: #000;
      content: attr(aria-keyshortcuts);
      font-size: 1rem;
      line-height: 1;
      padding: 0.4rem 0.4rem 0.6rem;
      position: absolute;
      right: -0.4rem;
      top: -0.4rem;
    }
    &[disabled] {
      background-color: rgb(0 0 0 / 0.1);
      color: rgb(0 0 0 / 0.35);
    }
    &:not([disabled]):hover {
      background-color: rgb(0 0 0 / 0.3);
    }
  }
  a {
    text-decoration: underline;
    text-underline-offset: 0.2rem;
  }
  button {
    background-color: rgb(0 0 0 / 0.2);
    &.pink:not([disabled]) {
      background-color: #c69;
      color: #fff;
      &:hover {
        background-color: #936;
      }
    }
  }
}