$wallsioBlue: #00222d;
$wallsioMuted: mix($wallsioBlue, white, 73.5%);
$wallsioInputBorderColor: mix($wallsioBlue, white, 25%);
$wallsioInputGroupBackground: #eee;

$uiBorderColor: #ddd;
$buttonBarBackground: #fcfcfc;


.wallsio-button-wrapper.wallsio-button-wrapper {
  position: relative;

  // It needs to have the same height as the surrounding elements, so that
  // `.wallsio-popup-wrapper` can use `bottom: 0`.
  display: inline-block;
}

.wallsio-add-wall-button .wallsio-media-button-icon {
  display: inline-block;
  width: 15px;
  height: 15px;

  background: no-repeat center center;
  background-size: contain;
  background-image: url('../img/logo.svg');

  vertical-align: text-top;
  margin: 0 2px;
}

.wp-media-buttons .wallsio-add-wall-button.wallsio-add-wall-button:active {
  margin-bottom: 5px;
}

.wallsio-popup-wrapper.wallsio-popup-wrapper {
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
  margin: 0;
  padding: 0;

  line-height: 1.4em; // Just like `body` (in case it was changed somewhere in the DOM)
}

.wallsio-popup-wrapper.wallsio-popup-wrapper,
.wallsio-popup-wrapper.wallsio-popup-wrapper * {
  box-sizing: border-box;
}

.wallsio-popup-wrapper .wallsio-popup {
  position: absolute;
  top: 8px;
  left: 0;

  width: 320px;

  background: white;
  border-radius: 3px;

  z-index: 100;

  border: 1px solid $uiBorderColor;
  box-shadow: 1px 3px 15px change_color($wallsioBlue, $alpha: 0.4);

  font-size: 14px;
}

.wallsio-popup-wrapper .wallsio-popup:before,
.wallsio-popup-wrapper .wallsio-popup:after {
  content: '';

  position: absolute;
  left: 65px;

  margin-top: -10px;

  border: 10px solid;
  border-color: transparent;
  border-bottom-color: $buttonBarBackground;

  pointer-events: none;
}

.wallsio-popup-wrapper .wallsio-popup:before {
  top: -10px;

  border-color: transparent;
  border-bottom-color: $uiBorderColor;
}

.wallsio-popup-wrapper .wallsio-popup:after {
  top: -9px;

  border-color: transparent;
  border-bottom-color: white;
}

.wallsio-popup .wallsio-popup-content {
  padding: 15px;
  padding-top: 21px;
}

.wallsio-popup .wallsio-multiple-inputs {
  display: flex;
}

.wallsio-popup .wallsio-multiple-inputs .wallsio-input,
.wallsio-popup .wallsio-multiple-inputs .wallsio-select {
  width: auto;
}

.wallsio-popup .wallsio-multiple-inputs .wallsio-second-input {
  margin-left: 0.5em;
  width: 1%;
  flex-grow: 0;
}

.wallsio-popup .wallsio-multiple-inputs .wallsio-first-input {
  flex-grow: 1;
  flex-shrink: 1;
}

.wallsio-popup .wallsio-second-input input[type=number] {
  width: 80px;
}

.wallsio-popup .wallsio-input-section {
  margin-bottom: 14px;
}

.wallsio-popup .wallsio-input-section:last-child {
  margin-bottom: 0;
}

.wallsio-popup .wallsio-checkbox-input-section {
  margin-top: 20px;
}

.wallsio-popup .wallsio-input-label {
  display: block;
  font-weight: 600;
  color: $wallsioMuted;
  margin-bottom: 6px;
}

.wallsio-popup .wallsio-checkbox-label {
  display: flex;
  align-items: center;
}

.wallsio-checkbox-caption-headline,
.wallsio-checkbox-caption-help {
  display: block;
}

.wallsio-popup .wallsio-checkbox-caption {
  // Resized checkboxes render different in different browsers:
  // Some scale them, others just display a small checkbox on the left
  // 0.75em is a compromise to look okay for both versions
  margin-left: calc(0.75em - 4px);
}

.wallsio-popup .wallsio-checkbox-caption-help {
  font-weight: normal;
  font-size: calc(1em * (12 / 14));
}

.wallsio-popup .wallsio-input-group-left,
.wallsio-popup .wallsio-input-group-right {
  display: table;
  width: 100%;
}

.wallsio-popup .wallsio-input-group-addon-left,
.wallsio-popup .wallsio-input-group-addon-right {
  padding: 7px 10px 3px;
  font-weight: 600;

  cursor: pointer;

  font-size: 14px;

  line-height: 1;
  color: $wallsioBlue;
  text-align: center;
  background-color: $wallsioInputGroupBackground;
  border: 1px solid $wallsioInputBorderColor;

  white-space: nowrap;
  vertical-align: middle;

  display: table-cell;
  width: 1%;
}

.wallsio-popup .wallsio-input-group-addon-left {
  border-right: 0;
  border-bottom-right-radius: 0;
  border-top-right-radius: 0;
}

.wallsio-popup .wallsio-input-group-addon-right {
  border-left: 0;
  border-top-left-radius: 0;
  border-bottom-left-radius: 0;
}

.wallsio-popup input.wallsio-input,
.wallsio-popup select.wallsio-select {
  margin: 0;

  display: block;

  font-size: 14px;

  line-height: calc(24 / 14);
  height: auto;
  padding: 7px 10px 3px;
  width: 100%;

  background-color: white;
  border-radius: 0;

  transition: border-color .15s ease-in-out, box-shadow .15s ease-in-out;

  color: $wallsioBlue;
}

.wallsio-popup select.wallsio-select {
  appearance: none;

  background-image: url('../img/select-caret.svg');
  background-repeat: no-repeat;
  background-size: 1em 0.75em;
  background-position: right center;
  background-clip: border-box;
}

.wallsio-popup input.wallsio-input {
  border: 1px solid $wallsioInputBorderColor;
}

.wallsio-popup .wallsio-select {
  border: 1px solid $wallsioInputBorderColor;
}

.wallsio-popup .wallsio-input-group-left .wallsio-input-right,
.wallsio-popup .wallsio-input-group-right .wallsio-input-left {
  position: relative;
  z-index: 2;
  float: left;
}

.wallsio-popup .wallsio-button-bar {
  padding: 15px;
  border-top: 1px solid $uiBorderColor;
  background: $buttonBarBackground;

  display: flex;
  align-items: center;
  justify-content: flex-end;

  border-radius: 0 0 3px 3px;
}

.wallsio-popup .wallsio-cancel,
.wallsio-popup .wallsio-insert {
  transition: all 0.1s ease-in-out;
}

.wallsio-popup .wallsio-cancel {
  margin-right: 15px;
  text-decoration: underline;
  height: 30px;
  line-height: 30px;
  cursor: pointer;
}

.wallsio-popup .wallsio-cancel:hover {
  opacity: 0.75;
}

.wallsio-popup-wrapper[data-auto-width="1"] .wallsio-fixed-width-input-group {
  display: none;
}

.wallsio-overlay.wallsio-overlay {
  opacity: 1;
  background: change_color(black, $alpha: 0.7);

  display: flex;
  align-items: center;
  justify-content: center;
}

.wallsio-overlay .wallsio-popup-wrapper {
  top: auto;
  bottom: auto;
  left: auto;
  right: auto;
}

.wallsio-overlay .wallsio-popup {
  position: static;
  margin: 10px;
}

.wallsio-overlay .wallsio-popup-wrapper .wallsio-popup:before,
.wallsio-overlay .wallsio-popup-wrapper .wallsio-popup:after {
  display: none;
}