@import '../../scss/variables';
@import '../../scss/mixins';

:host {
  position: relative;
  padding-bottom:  6px;

  &[cmp-id="search"] {
    flex-basis: 30%;
    min-width: 150px;
  }

  .search &[cmp-id="search"] {
    margin: 0;
  }

  /deep/ button, /deep/ input {
    margin-left: 6px;
    height: 32px;
    font-size: $sky-font-size-md;
  }

  /deep/ a {
    margin-left: 6px;
  }

  /deep/ .toolbar-item-container {
    position: relative;
    padding-right: 6px;
    input {
      border-radius: 6px;
      line-height: 1.42857;
      border: 1px solid $sky-color-gray-05;
      outline: none;
      -webkit-appearance: none;
      width: 100%;

      &:focus {
        box-shadow: 3px 0 8px 0 $sky-search-bar-outline-color;
        border: 1px solid $sky-color-blue-50;
        border-right: none;
      }

      &[type='text'] {
        padding: 6px;
        padding-right: 30px;
      }

      &::-webkit-input-placeholder {
        font-style: italic;
      }
      &:-moz-placeholder {
        font-style: italic;
      }
      &::-moz-placeholder {
        font-style: italic;
      }
      &:-ms-input-placeholder {
        font-style: italic;
      }
    }

    button {
      position: absolute;
      right: 0;
      top: 0;
      margin: 0;
      border-color: transparent;
      background-color: transparent;
      cursor: pointer;
    }
  }

  /deep/ button {
    border-radius: 3px;
    color: $sky-text-color-default;
    background-color: $sky-color-white;
    border: 1px solid #e7eaec;
    padding: 6px 12px;
    cursor: pointer;
  }
}