@import "~@/styles/forSize.mixin";

html { font-size: 16px; }

* {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}

#app {
  font-family: "Segoe UI", Helvetica, Arial, sans-serif;

  button, input, select, textarea {
    font-size: inherit;

    &:disabled { cursor: not-allowed; }
  }

  button {
    color: #1084AC;
    cursor: pointer;
    background-color: #1084AC0A;
    border: solid thin #1084AC;
    border-radius: 0.25em;
    font-weight: bold;
    font-size: 125%;
    padding: 0.5em;

    &:not(:disabled) {
      &:hover, &:focus {
        color: white;
        background-color: #1084AC;
        box-shadow: 0.125em 0.125em 0.25em #aaa;
      }

      &:active {
        box-shadow: 0 0 0.125em #999;
        position: relative;
        top: 0.125em;
        left: 0.125em;
      }
    }

    &:disabled { opacity: 0.75; }

  }

  button.low-profile {
    color: black;
    background-color: unset;
    border: none;
    box-shadow: none;
    font-weight: normal;
    transition-property: color, font-weight;
    transition-duration: 250ms;

    &:not(:disabled) {
      &:hover, &:focus {
        color: #1084AC;
        font-weight: bold;
        background-color: unset;
        box-shadow: none;
      }
    }
  }
}

.spin {
  animation-name: spin;
  animation-duration: 1000ms;
  animation-iteration-count: infinite;
  animation-timing-function: linear;
}

@keyframes spin {
  from { transform: rotate(0deg); }
  to { transform: rotate(360deg); }
}

.tumble {
  animation-name: spin;
  animation-duration: 2000ms;
  animation-iteration-count: infinite;
  animation-timing-function: ease-in-out;
}

@keyframes spin {
  from { transform: rotate(0deg); }
  to { transform: rotate(180deg); }
}

@include forSize(mobile) {
  body { margin: 0; }

  #app #debug-information .mobile { display: inline-block; }
}

@include forSize(tablet) {
  #app #debug-information .tablet { display: inline-block; }
}

@include forSize(desktop) {
  #app #debug-information .desktop { display: inline-block; }
}

@include forSize(ultrawide) {
  html { font-size: 24px; }

  #app #debug-information .ultrawide { display: inline-block; }
}