@import "variables.scss";

// Remove tap highlight on mobile browser
a {
  -webkit-tap-highlight-color: rgba(0,0,0,0);
  -webkit-box-shadow: none;
  box-shadow: none;
  outline: none;
}

.elm-overlay {
  z-index: 200;

  .elm-mini-controls {
    left: 6px;
    right: auto;
  }
}

.hidden {
  display: none !important;
}

.being-hidden {
  visibility: hidden;
  opacity: 0;
  transition: visibility 0s 1s, opacity 1s linear;
}

.tool-button {
  color: $tool-button-color;
  opacity: 0.7;
  cursor: pointer;

  &:active,
  &:visited {
    color: $tool-button-color;
  }

  &:hover {
    color: $tool-button-color;
    opacity: 1;
  }
}

div.loading {
  background: url(../images/loading.gif) center no-repeat #f8f8f8;
}

.pretty {
  margin-right: 0;
  white-space: normal;
}

.pretty .state label {
  text-indent: 0;
}

.pretty .state label > span {
  display: inline-block;
  padding-left: 1.8em;
  line-height: 1.3em;
}

.pretty .state label::after, .pretty .state label::before {
  top: 1px;
}

@media (#{$narrow-viewport}) {
  .hidden-in-narrow-viewport {
    display: none;
  }

  input, textarea {
    // http://stackoverflow.com/questions/2989263/disable-auto-zoom-in-input-text-tag-safari-on-iphone
    font-size: 16px;
  }
}
