@import "../variables";

search-bar {
  position: relative;
  display: inline-block;
  color: @minor-color;
  input {
    display: inline-block;
    padding: .5em 1.5em;
    position: absolute;
    z-index: 1;
    background: transparent;
    font-size: 1em;
    line-height: 1.2em;
    font-weight: 200;
    border: 1px solid @border-color;
    box-sizing: border-box;
    width: 100%;
    height: 100%;
    &:valid, &:focus {
      opacity: 1;
      outline: none;
      + .placeholder {
        text-align: left;
        .placeholder-text {
          opacity: 0;
        }
        .btn-clear {
          cursor: pointer;
          opacity: 1;
          z-index: 2;
        }
      }
    }
    &:focus {
      border: 2px solid @highlight-border-color;
    }
  }
  .placeholder {
    box-sizing: border-box;
    display: inline-block;
    position: relative;
    padding: .5em .3em;
    background: @background-color;
    width: 100%;
    text-align: center;
    .btn-clear {
      float: right;
      position: absolute;
      padding: .5em .3em;
      top: 0;
      right: 0;
      opacity: 0;
    }
  }
}