$color__grey-100: #F5F5F5;
$color__grey-200: #B0BEC5;
$color__grey-700: #455A64;

$color__yellow-100: #FFF9C4;
$color__yellow-500: #FFEB3B;

.velocious {
  overflow: hidden;
  margin: 20px 20px 20px 0;

  * {
    box-sizing: border-box;
    font-size: 15px;
  }

  h2 {
    font-size: 20px;
  }

  h3 {
    font-size: 17px;
  }

}

.velocious-header {
  overflow: hidden;
  padding: 20px 0 40px;
}

.velocious-button {
  background: $color__yellow-500;
  width: 100%;
  border: none;
  padding: 10px;
  margin-bottom: 20px;
  font-size: 20px;
  font-weight: 600;

  &.velocious-button--is-loading {

    &:after {
      content: " ( busy ... )";
      font-size: 15px;
    }
  }
}

.velocious-sidebar {
  background: white;
  float: right;
  width: 33%;
  margin-top: 60px;
  padding: 20px;
}

.velocious-content {
  overflow: hidden;
  width: 66%;
  float: left;
}

.velocious-asset-list {
  background: white;
  padding: 20px 0;
}

.c-asset-container-label {
  margin: 40px 40px 20px 40px;

}

.c-asset-container {
  background: $color__grey-100;
  padding: 20px;
  margin: 20px 40px 40px 40px;

}

.c-asset-container__item {
  display: block;
  overflow: hidden;
  background: white;
  margin: 10px;
  transition: opacity 0.4s ease-in-out;
  cursor: move;
  cursor: grab;
  cursor: -moz-grab;
  cursor: -webkit-grab;
  font-weight: bold;

  p {

    margin: 10px;
  }
}

// needs to be places outside, as we are leaving the container when moving
.gu-mirror {
  opacity: 0.8;
  margin: 10px;
  padding: 10px;
  padding: 0px;

  cursor: grabbing;
  cursor: -moz-grabbing;
  cursor: -webkit-grabbing;

  position: fixed !important;
  margin: 0 !important;
  z-index: 9999 !important;
  -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=80)";
  filter: alpha(opacity=80);
  background: $color__yellow-100;
  display: block;
}

.gu-transit {
  opacity: 0.6;
  -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=20)";
  filter: alpha(opacity=20);
  border: 1px solid $color__grey-200;
}

.gu-hide {
  display: none !important;
}

// background - element can't be moved there
.gu-unselectable {
  -webkit-user-select: none !important;
  -moz-user-select: none !important;
  -ms-user-select: none !important;
  user-select: none !important;
}

.c-message {
  margin: 20px 40px 0;
  padding: 20px 40px;
  font-weight: 500;
  background: $color__grey-100;

  .velocious__status:before {
    content: "● ";
    font-size: 20px;
  }

  &.c-message--ok {

    .velocious__status:before {
      color: green;
    }
  }

  &.c-message--error {

    .velocious__status:before {
      color: red;
    }
  }
}

.velocious-content {

  input {
    display: none;
  }

  label {
    height: 60px;
    padding: 20px 40px;
    background: none;
    display: block;
    float: left;
    cursor: pointer;
    color: #0288D1;
    font-weight: bold;
  }

  input:checked + label {
    background: white;
    cursor: default
  }

  div.tab {
    display: none;
    clear: left
  }

  input:nth-of-type(1):checked ~ .tab:nth-of-type(1),
  input:nth-of-type(2):checked ~ .tab:nth-of-type(2),
  input:nth-of-type(3):checked ~ .tab:nth-of-type(3) {
    display: block;
  }

}