@use "sass:meta";

.modal {
  inset: 0.5em 1em;
  outline: none;
  position: absolute;

  p {
    margin: 0 0 0.5em;
  }

  a {
    color: #4a91c2;
    text-decoration: none;

    &:hover {
      color: #00c3ff;

      &[href],
      &[tabindex] {
        cursor: pointer;
      }
    }
  }

  button {
    background: #ddd;
    margin: 0 0.25em;
    width: initial;

    &.active {
      background: #c4c4c4;
    }

    &:hover {
      background: #b0b0b0;
    }
  }

  .close {
    background: transparent;
    color: #888;
    padding: 0;
    position: absolute;
    right: -0.25em;
    top: 0;

    &:hover {
      background: transparent;
      color: #444;
    }
  }

  img {
    width: 100%;
  }
}

.modal-overlay {
  inset: calc(max(50%, var(--height) / 2) - var(--height) / 2 + 2em) calc(max(50%, var(--width) / 2) - var(--width) / 2 + 2em);
  overflow-y: auto;
  position: fixed;

  &.help-modal {
    --height: 26.5em;
    --width: 57.2em;

    background: #f8f8f8;
  }

  &.binding-modal {
    --height: 22.5em;
    --width: 36em;

    background: #ededed;
  }
}

@include meta.load-css("bindings");
