@import '../components/base/base.css';

* {
  -moz-user-select: none;
}

body {
  margin: 0;
  font-family: "FiraSans";
  background-color: var(--background);
  color: var(--title-color);
  overflow: hidden;

  --slide-transition: transform 0.2s ease;
}

html.loading {
  height: 100%;
}

html.loading body {
  background: black url(/icons/sharing_189.png) center center no-repeat;
  background-size: 6.4rem;
}

[disabled] {
  pointer-events: none;
  opacity: 0.2;
}

.hide {
  display: none !important;
}

gaia-header {
  margin-bottom: 0.5rem;

  --header-background: #9ab0c0;
  --header-icon-color: white;
  --header-title-color: white;
  --header-action-button-color: white;
}

gaia-button {
  font-size: 12px !important;
  height: 30px !important;
  min-width: 75px !important;
  padding: 0 !important;
  margin: 0 !important;
  --button-color: var(--title-color);
}

gaia-button[data-action="download"] {
  --button-background: var(--color-blue);
  --button-box-shadow: none;
  --button-color: white;
  --button-background-active: white;
  --button-box-shadow-active: none;
  --button-color-active: var(--title-color);
}

#rename-device {
  font-style: italic;
  font-size: 14px;
  color: #00aac5;
  align-self: flex-start;
  margin-top: 7px;
}

#app-view {
  position: fixed;
  top: 0;
  bottom: 0;
  left: 0;
  right: 0;
  z-index: 2;
  background-color: var(--background);
  color: var(--text-color);
  --header-icon-color: var(--text-color);
  transition: var(--slide-transition);
  transform: translateY(100%);
}

#app-view.active {
  transform: translateY(0);
}

#app-view p {
  font-size: 15px;
  line-height: 20px;
  margin: 16px;
  color: var(--text-color);
  --header-icon-color: var(--text-color);
}

#proximity-empty-list {
  margin-top: 12px;
}

#proximity-empty-list li {
  padding-top: 20px !important;
  font-size: 16px !important;
}

gaia-dialog.install img {
  display: block;
  width: 38px;
  height: 38px;
  margin: -10px auto 0px;
  overflow: hidden;
}

.app-list gaia-loading {
  min-height: 0 !important;
}

.app-list {
  width: 100%;
}

.app-list li {
  height: 66px;
}

.app-list img {
  max-height: 100%;
  float: left;
  margin-right: 13px;
}

.app-list h3 {
  margin: 0;
  font-size: 19px !important;
  color: var(--text-color);
}

.app-list h4 {
  margin: 0 0 0 2px;
  font-size: 15px !important;
  color: var(--title-color);
}

.app-list h3, .app-list h4 {
  pointer-events: none;
}

#proximity-apps-container {
  transform: translateX(-100%);
}

#share-apps-container {
  transform: translateX(100%);
}

#proximity-apps-container,
#share-apps-container {
  position: absolute;
  top: 0;
  width: 100%;
  height: 100%;
  overflow-y: scroll;
  transition: var(--slide-transition);
}

#proximity-apps-container.active,
#share-apps-container.active {
  transform: translateX(0);
}