ux-toolbar-search {
  display: inline-block;
  top: 0;

  [uxToolbarSearchField] {
    width: 100%;
    height: 36px;
    visibility: hidden;
    transition: visibility 0s 0.3s;
  }

  [uxToolbarSearchButton] {
    position: absolute;
    top: 4px;
    right: 0;
    z-index: 1;
  }

  &.right {
    left: 0;
  }

  &.left {
    right: 0;
  }

  &.expanded {
    &.left {
      right: -4px;
    }

    [uxToolbarSearchField] {
      padding-right: 35px;
      visibility: visible;
      transition: visibility 0s;

      &.ux-toolbar-search-clear-offset {
        padding-right: 67px;
      }
    }

    [uxToolbarSearchButton] {
      right: 4px;
    }
  }

  .ux-toolbar-search-clear {
    position: absolute;
    top: 4px;
    right: 36px;
  }
}