.media-toolbar {
  position: sticky;
  top: 67px;
  z-index: 10;
  display: flex;
  flex-wrap: wrap;
  padding: 0;
  background-color: $toolbar-bg;
  border-bottom: 1px solid $border-color;
  border-inline-start: 1px solid $border-color;
  border-radius: 0 $border-radius 0 0;
  box-shadow: 0 -1px 0 0  $border-color;
  input {
    padding: .3rem .75rem;
  }
  &-icon {
    display: inline-block;
    width: $toolbar-icon-width;
    font-size: 1.3rem;
    line-height: $toolbar-height;
    color: var(--template-bg-dark-60);
    text-align: center;
    background-color: transparent;
    border: 0;
    border-inline-start: 1px solid $border-color;
    box-shadow: 1px 0 #fefefe inset;
    &.active {
      color: #fff;
      background-color: var(--template-bg-dark-60);
      &:hover {
        background-color: var(--template-bg-dark-80);
      }
    }
    &:hover {
      background-color: $toolbar-icon-bg-hover;
      box-shadow: none;
    }
  }
  &-select-all {
    width: 1.1rem;
    margin: 1rem;
  }
}

.media-view-icons {
  display: flex;
  .disabled {
    span {
      opacity: .3;
    }
    &:hover, span:hover {
      cursor: default;
    }
  }
}

.media-view-search-input {
  display: flex;
  align-items: center;
  padding: 0 5px;
}

.media-loader {
  position: absolute;
  right: 100%;
  bottom: 0;
  left: 0;
  z-index: 10;
  height: $toolbar-loader-height;
  background-image: $toolbar-loader-color;
  animation: 10s ease 0s normal none 1 running mediaLoader;
  animation-fill-mode: forwards;
}

@keyframes mediaLoader {
  from {
    right: 100%;
  }

  to {
    right: 0;
  }
}