#web_editor-top-actions  {
  a {
    .transition(all 0.3s);
    color: darken(@we_color-primary, 10%);
    &:hover, &:active {
      text-decoration: none;
      color: darken(@we_color-primary, 20%);
    }
  }
  // BUTTONS
  // ====================
  .btn {
    font-size: 12px;
    color: #999999;
    font-weight: bold;
    text-decoration: none;
    .transition(all 0.3s);
    &:hover, &:focus {
      color: white;
      text-decoration: none;
    }
    &.accent {
      .button-variant(white, @we_color-accent, @we_color-accent)
    }
    &.compl {
      .button-variant(white, @we_color-primary, @we_color-primary)
    }
    &.full {
      margin-top: 0;
      margin-bottom: 0;
      border-radius: 0;
      .box-shadow(none);
    }
    &.btn-primary {
      .button-variant(white, @we_color-accent, @we_color-accent);
      text-transform: uppercase;
    }
    &.btn-danger {
      .button-variant(white, @we_color-danger, @we_color-danger);
      text-transform: uppercase;
    }
    &.btn-success {
      .button-variant(white, @we_color-success, @we_color-success);
      text-transform: uppercase;
    }
  }
  .dropdown-toggle {
    color: @we_dropdown-toggle-color;
    height: @we_editor-bar-height - @we_editor-dropdown-border-height;
    line-height: @we_editor-bar-height - @we_editor-dropdown-border-height;
    border-top: @we_editor-dropdown-border-height solid transparent;
    text-shadow:0 1px 0 @we_dropdown-toggle-shadow-color;
  }
  .dropdown-menu {
    margin: 0;
    overflow: hidden;
    border-radius: 0;
    border: none;
    background-color: @we_dropdown-menu-color;
    .box-shadow(@we_box-shadow);
    li {
      a {
        color: @we_dropdown-toggle-color;
      }
      &:hover {
        a {
          color: @we_dropdown--open-toggle-color;
          background: transparent;
        }
      }
    }
    li.divider {
      margin: 3px 20px;
      background-color: @we_color-inactive;
    }
  }
  .open {
    > .dropdown-toggle {
      background-color: @we_dropdown--open-toggle-bg-color;
      color:  @we_dropdown--open-toggle-color;
      border-top: @we_editor-dropdown-border-height solid white;
      text-shadow:0 1px 0 @we_dropdown--open-toggle-shadow-color;
    }
  }
  .dropdown-menu {
    position: absolute;
    left: auto;
    right: 0;
  }

  // ICONS
  // ======================
  .material-icons {
    font-size: 1em;
    .translateY(2px);
    margin-right: 5px;
  }

  // POPOVERS
  // ======================
  .popover {
    border-radius: 3px;
    .popover-title{
      color: @we_color-text-dark
    }
  }

  // INPUTS
  // ======================
  .form-control {
    font-weight: bold;
    color: @we_color-text-dark;
  }
  .input-group-addon{
    color: @we_color-text-dark;
    font-weight: bold;
  }
}

// INPUTS
// ==================
.switch {
  position: relative;
  display: inline-block;
  box-sizing: border-box;
  margin: 0 0.5em;
  padding: 0;
  height: 1.5em;
  cursor: pointer;
  .translateY(0.2em);
  .switch_track {
    background: #bababa;
    border-radius: 0.4em;
    height: 1em;
    width: 2.5em;
    display: inline-block;
    .transition(all 0.3s @we_md-ease);
    &:after {
      content: "";
      background: #fafafa;
      display: block;
      width: 1.5em;
      height: 1.5em;
      border-radius: 100em;
      margin-top: -0.3em;
      margin-left: -0.1em;
      .transition(all 0.3s @we_md-ease);
      .box-shadow(@we_box-shadow);
    }
  }
  .switch_input {
    position: absolute;
    width: 0;
    height: 0;
    margin: 0;
    padding: 0;
    opacity: 0;
    -ms-appearance: none;
    -moz-appearance: none;
    -webkit-appearance: none;
    appearance: none;
    border: none;
  }
  &.checked {
    .switch_track {
      background-color: rgb(142, 224, 212);
      background-color: transparentize(@we_color-accent, 0.5);
      &:after {
        background-color: @we_color-accent;
        margin-left: 1.1em;
      }
    }
  }
  &:hover {
    .switch_track {
      &:after {
        background-color: mix(@we_color-accent, #fafafa);
      }
    }
  }
}



// TEXT INPUT
// ==========================

// <div class="text-input-group">
//   <input type="text" required="true"/>
//   <span class="highlight"></span>
//   <span class="bar"></span>
//   <label>Name</label>
// </div>

.text-input-group {
  position:relative;
  margin-bottom:45px;

  input{
    font-size:18px;
    padding:10px 10px 10px 5px;
    display:block;
    width:300px;
    border:none;
    border-bottom:1px solid #757575;
  }
  input:focus{ outline:none; }

  /* LABEL ======================================= */
  label{
    color:#999;
    font-size:18px;
    font-weight:normal;
    position:absolute;
    pointer-events:none;
    left:5px;
    top:10px;
    .transition(0.2s ease all)
  }

  /* active state */
  input:focus ~ label, input:valid ~ label{
    top:-20px;
    font-size:14px;
    color:#5264AE;
  }

  /* BOTTOM BARS ================================= */
  .bar    { position:relative; display:block; width:300px; }
  .bar:before, .bar:after{
    content:'';
    height:2px;
    width:0;
    bottom:1px;
    position:absolute;
    background:#5264AE;
    .transition(0.2s ease all);
  }
  .bar:before {
    left:50%;
  }
  .bar:after {
    right:50%;
  }

  /* active state */
  input:focus ~ .bar:before, input:focus ~ .bar:after {
    width:50%;
  }

  /* HIGHLIGHTER ================================== */
  .highlight {
    position:absolute;
    height:60%;
    width:100px;
    top:25%;
    left:0;
    pointer-events:none;
    opacity:0.5;
  }

  /* active state */
  input:focus ~ .highlight {
    .animation(inputHighlighter 0.3s ease);
  }

}


// DRAG&DROP ANIMATIONS
// ==========================

.oe_snippet_body {
  .opacity(0);
  .animation(fadeInDownSmall 1s forwards);
}