@import "./condition";
@import "./input";

$padding: 40px;

[data-content=translation] {
  width: calc(720px - #{2 * $padding});
  margin: auto;
  background-color: #cbcbcb;
  padding: $padding $padding 0 $padding;
}

.translation-title {
  color: #fff;
  font-size: 40px;
  margin-bottom: 40px;
  word-wrap: break-word;
}

.translation-form {
  overflow: hidden;
}

.translation-variables {
  float: left;
  width: 20%;
  margin-right: 6.67%;
}

.translation-sub-title {
  color: #fff;
  padding: 6px 0;
  border-bottom: 1px solid #acacac;
  margin-bottom: 10px;
  display: block;
  @include font-size(2);
}

.translation-inputs {
  width: calc(73.33% - 2px);
  float: left;
  padding-bottom: 40px;

  .translation-sub-title {
    margin-left: 2px;
    margin-right: 2px
  }
}

.translation-actions {
  float: right;
  overflow: hidden;
  margin-top: 10px;
  width: 100%;
}

.save-button-container {
  position: relative;
  display: inline-block;
  float: right;
}

.save-spinner {
  @include transition(transform 0.2s);
  top: 4px !important;

  .is-waiting & {
    @include transform(scale(0, 0));
  }

  .is-loading & {
    @include transform(scale(1, 1));
  }
}

.save {
  @include transition(transform 0.2s);
  float: right;

  .is-waiting & {
    @include transform(scale(1, 1));
  }

  .is-loading & {
    @include transform(scale(0, 0));
  }
}