/* This Source Code Form is subject to the terms of the Mozilla Public
 * License, v. 2.0. If a copy of the MPL was not distributed with this file,
 * You can obtain one at http://mozilla.org/MPL/2.0/. */

.panel-content.showing-share-panel,
.panel-content.showing-share-panel > .panel-container {
  min-height: 220px;
}

/* Room share panel */
.room-invitation-overlay {
  position: absolute;
  background: rgba(255, 255, 255, 0.85);
  top: 0;
  height: 100%;
  right: 0;
  left: 0;
  color: #000;
  z-index: 1010;
  display: flex;
  flex-flow: column nowrap;
  align-items: stretch;
}

.room-invitation-content {
  display: flex;
  flex-flow: column nowrap;
  margin: 12px 0;
  font-size: 1.4rem;
}

.room-invitation-content > * {
  margin: 0 15px;
}

.room-context-header {
  font-weight: bold;
  font-size: 1.6rem;
  margin-bottom: 10px;
  text-align: center;
}

/* Input Button Combo group */
.input-button-content {
  margin: 0 15px 10px 15px;
  min-width: 64px;
  border-radius: 4px;
}

.input-button-group-label {
  color: #898a8a;
  margin: 0 15px;
  margin-bottom: 2px;
  font-size: 1.2rem;
}

.input-button-content > * {
  width: 100%;
  padding: 0 4px;
}

.input-button-content > .input-group input {
  font-size: 1.4rem;
  padding: 0.7rem;
  width: 100%;
  border: 0;
}

.input-button-content > .group-item-top {
  border: 1px solid #d2cece;;
  border-radius: 4px 4px 0 0;
  border-bottom: 0;
}

.input-button-content > .group-item-bottom {
  border-radius: 0 0 4px 4px;
}

.input-button-content > .input-group {
  background: #FFF;
}

.input-button-content > .invite-button {
  background: #00a9dc;
  height: 34px;
  text-align: center;
  display: flex;
  flex-wrap: nowrap;
  justify-content: center;
  align-items: center;
}

.input-button-content > .invite-button.triggered {
  background-color: #00a9dc;
}

.input-button-content > .invite-button:hover {
  background-color: #008ACB;
}

.share-action-group {
  display: flex;
  padding: 0 15px;
  width: 100%;
  flex-wrap: nowrap;
  flex-direction: row;
  justify-content: center;
}

.share-action-group > .invite-button {
  cursor: pointer;
  height: 34px;
  border-radius: 4px;
  background-color: #ebebeb;
  display: flex;
  flex-wrap: nowrap;
  justify-content: center;
  align-items: center;
  flex-grow: 1;
  margin-right: 20px;
}

html[dir="rtl"] .share-action-group > .invite-button {
  margin-left: 20px;
  margin-right: initial;
}

.share-action-group > .invite-button:last-child {
  margin-right: 0;
}

html[dir="rtl"] .share-action-group > .invite-button:last-child {
  margin-left: 0;
}

.share-action-group > .invite-button:hover {
  background-color: #d4d4d4;
}

.share-action-group > .invite-button.triggered {
  background-color: #d4d4d4;
}

.share-action-group > .invite-button > img {
  height: 28px;
  width: 28px;
}

.share-action-group > .invite-button > div {
  display: inline;
  color: #4a4a4a;
}

.share-service-dropdown {
  color: #000;
  text-align: start;
  bottom: auto;
  top: 0;
  overflow: hidden;
  overflow-y: auto;
}

/* When the dropdown is showing a vertical scrollbar, compensate for its width. */
body[platform="other"] .share-service-dropdown.overflow > .dropdown-menu-item,
body[platform="win"] .share-service-dropdown.overflow > .dropdown-menu-item {
  -moz-padding-end: 20px;
}

.share-service-dropdown > .dropdown-menu-item > .icon {
  width: 14px;
  height: 14px;
  margin-right: 4px;
}

.dropdown-menu-item > .icon-add-share-service {
  background-image: url("../img/icons-16x16.svg#add");
  background-repeat: no-repeat;
  background-size: 12px 12px;
  width: 12px;
  height: 12px;
}

.dropdown-menu-item:hover > .icon-add-share-service {
  background-image: url("../img/icons-16x16.svg#add-hover");
}

.dropdown-menu-item:hover:active > .icon-add-share-service {
  background-image: url("../img/icons-16x16.svg#add-active");
}

.share-panel-container {
  position: absolute;
  top: 0;
  left: 0;
  bottom: 0;
  right: 0;
  z-index: 999;
}

.share-panel-container > .share-panel-overlay {
  background-color: rgba(0, 0, 0, .3);
  bottom: 0;
  display: none;
  left: 0;
  position: absolute;
  right: 0;
  top: 0;
}

.share-panel-container > .room-invitation-overlay {
  background-color: #fff;
  flex: 1;
  flex-flow: column nowrap;
  justify-content: center;
  transform: translateX(100%);
  transition: transform ease 300ms;
  width: 294px;
  right: 0;
  left: initial;
}

html[dir="rtl"] .share-panel-container > .room-invitation-overlay {
  left: 0;
  right: initial;
  transform: translate(-100%);
}

.share-panel-container > .room-invitation-overlay > .room-invitation-content {
  margin: 0 0 12px;
}

.share-panel-open > .room-invitation-overlay,
html[dir="rtl"] .share-panel-open > .room-invitation-overlay {
  transform: translateX(0);
}

.share-panel-open > .share-panel-overlay {
  display: block;
}

.share-panel-container > .room-invitation-overlay > .room-invitation-content > .room-context-header {
  text-align: left;
}

html[dir="rtl"] .share-panel-container > .room-invitation-overlay > .room-invitation-content > .room-context-header {
  text-align: right;
}
