/*
  Reusable game UI components:
  - Buttons
  - Speech bubbles
  - Frame borders (used on pretty much everything - buttons, speech bubbles,
    map container, inventory box)
*/
.button {
  appearance: none;
  border: none;
  padding: 0;
  font: inherit;
}

/*
  Action buttons used for doors, items, miscellaneous actions and speech bubbles
  used for conversations, signpost reading etc
*/
.speech-bubble,
.button {
  position: relative;

  .frame-inner {
    display: block;
    color: white;
    padding: 0.5rem 1rem;
    font-size: 0.875rem;
    font-weight: normal;
    white-space: nowrap;
  }
}
.button {
  cursor: pointer;

  .frame-inner {
    transition: background-color 0.3s steps(3);
  }
  &:is(:hover, :focus) .frame-inner {
    background-color: #9f664b;
  }
}

.speech-bubble {
  /* Make these grey to distinguish from buttons */
  filter: grayscale(1);

  .frame-inner {
    background: #ccc;
    color: #000;
  }
}

.button,
.frame {
  background:
    url("../assets/ui/frame-nw.png") top left no-repeat,
    url("../assets/ui/frame-ne.png") top right no-repeat,
    url("../assets/ui/frame-se.png") bottom right no-repeat,
    url("../assets/ui/frame-sw.png") bottom left no-repeat;

  &::before {
    position: absolute;
    left: 2px;
    right: 2px;
    top: 0;
    bottom: 0;
    background:
      url("../assets/ui/frame-s.png") bottom repeat-x,
      url("../assets/ui/frame-n.png") top repeat-x;
    content: "";
    pointer-events: none;
  }
  &::after {
    position: absolute;
    left: 0;
    right: 0;
    top: 2px;
    bottom: 2px;
    background:
      url("../assets/ui/frame-e.png") right repeat-y,
      url("../assets/ui/frame-w.png") left repeat-y;
    content: "";
    pointer-events: none;
  }
}
.frame-inner {
  width: 100%;
  background-color: var(--riverbed-brown);
}