@import '../base/variables';


@charset "utf-8";
/* General styles */
html,
body {
  height: 100%;
  margin: 0;
  overflow: hidden;
}
.popover-content h2 {
  font-size: 14px;
  color: $secondary-text-color;
  margin: 0;
}
.popover-content textarea {
  resize: none;
}
.btn {
  cursor: pointer;
}
.popover-content section {
  display: none;
}
#resource {
  position: relative;
  /* HACK allow cover */
}
/*
	HACK: Cover the resource (media object) to prevent it from being
	clicked or hovered.
 */
.media:after {
  content: '';
  display: block;
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  background-color: transparent;
  z-index: 1000;
}
/*
	HACK: Glue will eventually provide this, which prevents large
	padding on desktop.
*/
.popover-interior.desktop .popover-footer {
  padding-bottom: 0px;
}
.popover-footer .btn {
  margin: 5px;
}
body.error #error,
body.share #share,
body.send #send,
body.embed #embed,
body.options #options {
  display: block;
}
body.sending .cancel {
  display: none;
}
.popover-footer .throbber {
  display: none;
  float: left;
  top: -5px;
}
body.sending .popover-footer .throbber {
  display: inline-block;
}
#share .placeholder-poly-label {
  top: 5px;
  left: 22px;
}
#send .placeholder-poly-label {
  top: 5px;
  left: 14px;
}
/* For the recipients autocomplete box */
#user-list .placeholder-poly-label {
  left: 12px;
  top: 6px;
}
/* Network Toggle Icons */
#networks [data-network] .icon {
  background-repeat: no-repeat;
  display: block;
  height: 24px;
  width: 24px;
}
#networks [data-network] .icon {
  background-image: url(../images/socialmediaicons_small.png);
}
#networks [data-network]:active .icon {
  opacity: 0.3;
}
#networks .selected[data-network=facebook] .icon {
  background-position: 0 0;
}
#networks .selected[data-network=twitter] .icon {
  background-position: 0 -24px;
}
#networks .selected[data-network=tumblr] .icon {
  background-position: 0 -48px;
}
#networks [data-network=facebook] .icon {
  background-position: -24px 0;
}
#networks [data-network=twitter] .icon {
  background-position: -24px -24px;
}
#networks [data-network=tumblr] .icon {
  background-position: -24px -48px;
}
/* End Network Toggle Icons */
/* Network Settings Icons */
#options [data-network] .icon {
  background-image: url(../images/socialmediaicons_big.png);
}
#options [data-network] .icon {
  background-repeat: no-repeat;
  display: block;
  height: 32px;
  width: 32px;
}
#options [data-network=facebook] .icon {
  background-position: 0 0;
}
#options [data-network=twitter] .icon {
  background-position: 0 -32px;
}
#options [data-network=tumblr] .icon {
  background-position: 0 -64px;
}
/* End Settings Icons */
/* Share view */
#share textarea {
  height: 135px;
}
#share ul {
  padding-left: 0px;
  margin: 0;
}
#share .networks-section {
  padding-top: 14px;
  margin-bottom: 4px;
  /* override standard-grid */
}
#networks {
  display: flex;
  align-items: center;
}
#networks-label {
  margin-right: 2px;
}
#networks li {
  display: inline;
  list-style: none;
  margin-right: 5px;
}
#share-options span {
  cursor: pointer;
}
#share-options span:hover {
  color: $primary-text-color;
  text-decoration: underline;
}
#networks li:last-child {
  margin-right: 0;
}
#share-options {
  color: $secondary-text-color;
  flex-grow: 1;
  text-align: right;
}
#send textarea {
  height: 182px;
}
/* Send to a friend view */
#user-list {
  background: #FFFFFF;
  border-radius: 3px;
  cursor: text;
  margin-bottom: 5px;
  padding: 4px 12px;
  position: relative;
  height: auto;
}
#user-list.focus {
  background: #FFFFFF;
}
#user-list input {
  background: transparent;
  border: none;
  box-shadow: none;
  display: inline-block;
  padding: 0;
  -webkit-transition: none;
  -moz-transition: none;
  -o-transition: none;
  transition: none;
  height: auto;
  /* override glue .form-control */
}
#user-list .selected-user {
  background: $primary-text-color;
  border-radius: 3px;
  color: #FFFFFF;
  cursor: default;
  display: inline-block;
  font-size: 12px;
  font-weight: 200;
  line-height: 16px;
  margin: 4px 5px 3px 0;
  padding: 0 6px;
  text-shadow: none;
}
#user-list .delete {
  opacity: .3;
  padding-left: 4px;
}
#user-list .delete:before {
  font-family: "glue1-spoticon";
  font-style: normal;
  font-weight: normal;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  display: inline-block;
  line-height: inherit;
  vertical-align: bottom;
  content: "\f160";
  font-size: 10px;
}
#user-list .delete:hover {
  opacity: 1;
}
#user-results {
  display: none;
  position: absolute;
  top: 100%;
  left: -1px;
  right: -1px;
  z-index: 10;
  background-color: $primary-border-color;
}
#user-results .throbber {
  margin: 0 auto;
}
#user-results .throbber-item {
  display: none;
}
#user-results.loading .throbber-item {
  display: block;
}
#user-results.loading .no-results {
  display: none;
}
#user-results .no-results {
  color: $secondary-text-color;
  text-align: center;
}
/* Options view */
body.options #resource {
  display: none;
}
body.options .popover-content {
  padding: 0;
}
#options {
  position: relative;
}
#options .auth {
  padding: 15px 0;
  position: relative;
}
#options .throbber {
  display: none;
  top: -6px;
  left: -4px;
}
#options .connecting .throbber {
  display: block;
}
#options .connecting .icon {
  display: none;
}
#options .auth .icon {
  float: left;
}
#options .auth button {
  width: 70px;
  /* Enough space to accommodate both "Connect" and "Disconnect" */
  float: right;
}
#options .account {
  display: none;
}
#options .connected .account {
  display: inline-block;
  font-weight: 400;
}
#options .state {
  color: $secondary-text-color;
}
#options .error .state {
  color: #c00;
}
#options .connected .state,
#options .error .state,
#options .unknown .state {
  display: inline-block;
}
#options .connect-head {
  overflow: auto;
}
#options .connect-head > button {
  float: right;
  margin-right: 7px;
  margin-top: 12px;
  width: auto;
}
#options .connect-info {
  display: inline-block;
  margin-top: 6px;
  width: 50%;
}
#options .settings-info {
  display: inline-block;
  margin: 6px;
  width: 35%;
  float: right;
  text-align: right;
}
#options .connect {
  overflow: auto;
}
#options .connect .password-disclaimer {
  padding-top: 3px;
}
#options .icon-wrapper {
  float: left;
  height: 50px;
  width: 50px;
  padding: 10px;
  overflow: hidden;
  /* Prevent throbber from overflowing */
}
#options .options-back {
  position: absolute;
  top: -3px;
  left: 8px;
  border-bottom: none;
  /* Override glue .nav */
  z-index: 1000;
  /* Ensure title bar does not cover */
}
.disclaimer {
  font-size: 11px;
  margin: 5px;
}
#options .placeholder-poly-label {
  top: 6px;
  left: 21px;
}
/* Error view */
body.error #resource {
  display: none;
}
body.error .popover > .popover-content {
  padding: 0;
}
/******************************************************************************
* Placeholder Polyfill (Required)
******************************************************************************/
.placeholder-poly-parent {
  position: relative;
}
.placeholder-poly-label {
  color: #404040;
  font-size: 14px;
  position: absolute;
}
/* Embed tab */
#embed {
  top: 63px;
}
body.embed #resource {
  display: none;
}
.embed-iframe {
  border: 0;
  margin: 0;
  padding: 0;
  background-color: #fff;
  line-spacing: 0;
}
.embed-wrapper {
  padding: 0px 10px 10px 10px;
}
div.embed-code {
  top: 0px;
  bottom: 0px;
}
a#embed-advanced {
  display: inline-block;
  float: right;
  color: #666;
  margin-top: 2px;
}
.embed-sizes label {
  margin-bottom: 10px;
  margin-right: 10px;
}
.embed-button-preview {
  height: auto;
  text-align: center;
  position: relative;
  margin-bottom: 10px;
}
.embed-button-prevent-click {
  position: absolute;
  height: 100%;
  width: 100%;
  z-index: 10;
  background-color: transparent;
}
/* invite-mode */
/* Remove once https://abtesting.spotify.net/#/tests/75 has ended*/
.invite-mode #tabs {
  display: none;
}
.invite-mode #resource {
  display: none;
}
