assistant {
  display: block;
  height: 100%;
  width: 100%;
  background: var(--color-ui-4);
  box-shadow: 0 8px 16px 0 rgba(0,0,0,0.10);
  border-radius: 4px;
  color: var(--color-brand-dark);
  will-change: transform, margin-right;
  transition: all 0.2s;
  z-index: 900;

  label {
    opacity: 0.5;
  }

  select {
    color: var(--color-brand-dark);
  }

  select[disabled] {
    opacity: 0.5;
  }

  button {
    @include ignore-device-rendering();
    background: transparent;
    border-width: 0;
    text-align: left;
  }

  button[disabled] {
    opacity: 0.5;
  }

  button.primary-action {
    color: var(--color-highlight);
  }

  .group {
    background: var(--color-ui-4);
    border-width: 0;

    h2 {
      font-size: 1.2rem;
      opacity: 0.5;
      margin-bottom: $default-padding;
    }
  }
}

.assist-logo {
  @include stretch();
  padding: 0 1rem;
}

.assist-toolbar {
  background:  rgba(217, 219, 222, 0.6);
  height: $assist-toolbar-height;
  width: 100%;
  align-items: center;

  @include flex();

  button {
    margin: 0;
    padding-top: 0.6rem;
    width: 3rem;
    height: 100%;
    text-align: center;
    position: relative;
    border-radius: 0;
    min-width:3rem;
    &:hover{
      box-shadow: none;
      background: var(--color-ui-2);
    }
  }
}

.assist-search {
  @include flex();
  @include flex-row();
  background: var(--color-brand-dark);
  border-radius: $border-radius;
  height: $assist-search-height;
  margin: $default-padding;

  input {
    @include stretch();
    background: transparent;
    color: white;
    border-width: 0;
    margin-left: 0.5rem;
  }
}

.assist-container {
  @include flex();
  @include flex-column();

  button {
    color: white;
  }
}