$bgColor: #323232;
$bgAccentColor: #222222;
$primaryColor: #868686;
$accentColor: #ed3161;
$buttonColor: #262626;
$buttonTextColor: #bcbcbc;
$buttonTextHoverColor: #1faaf2;

$panelLeft: 230px;
$panelRight: 331px;
$panelHeight: 220px;

.recast-plugin-panel {
  position: absolute;
  z-index: 9998; // A-Frame canvas and inspector share same zIndex.
  bottom: 0;
  width: 100%;
  height: $panelHeight;
  left: 0;
  right: 0;

  padding-left: $panelLeft;
  // padding-right: $panelRight;
  padding-right: 0;

  background: $bgColor;
  color: $primaryColor;

  box-sizing: border-box;
  border-left: 1px solid $bgAccentColor;
  border-right: 1px solid $bgAccentColor;

  .panel-header {
    background: $bgAccentColor;
    text-transform: uppercase;
    padding: 0.5em;
  }

  .panel-content {
    display: grid;
    grid-template-columns: 1fr 1fr 1fr;
    grid-column-gap: 1em;
    padding: 1em;
    max-width: 500px;
  }

  .panel-field {
    display: flex;
    flex-direction: column;
    padding-bottom: 1em;

    input:invalid {
      border-bottom: 1px solid crimson;
      background: rgba(255, 0, 0, 0.25);
    }
  }

  .panel-field-label {
    padding-bottom: 0.2em;
  }

  .panel-btn-wrap {
    position: absolute;
    bottom: 1em;
    left: calc(1em + #{$panelLeft});
  }

  .panel-btn {
    background: $buttonColor;
    color: $buttonTextColor;
    font-size: 11px;
    padding: 5px;
    border: none;

    &:hover {
      color: $buttonTextHoverColor;
    }
  }

  .recast-spinner {
    z-index: 1000;
    width: calc(100% - #{$panelLeft} - #{$panelRight});
    height: 100%;
    background: rgba(0, 0, 0, 0.5);
    position: absolute;
    left: $panelLeft;
    right: $panelRight;
    top: 0;
    display: flex;
    align-items: center;

    opacity: 0.0;
    pointer-events: none;
    transition: opacity ease 0.2s;

    @import "spinner";
  }

  .recast-spinner.active {
    opacity: 1.0;
    pointer-events: all;
  }
}
