/*
 * Copyright 2024 The Chromium Authors. All rights reserved.
 * Use of this source code is governed by a BSD-style license that can be
 * found in the LICENSE file.
 */


.ai-assistance-feedback-row {
  width: 100%;
  display: flex;
  gap: var(--sys-size-8);
  justify-content: space-between;
  align-items: center;
  margin-block: calc(-1 * var(--sys-size-3));

  .rate-buttons {
    display: flex;
    align-items: center;
    gap: var(--sys-size-2);
  }

  .vertical-separator {
    height: 16px;
    width: 1px;
    vertical-align: top;
    margin: 0 var(--sys-size-2);
    background: var(--sys-color-divider);
    display: inline-block;
  }

  .suggestions-container {
    overflow: hidden;
    position: relative;
    display: flex;

    .suggestions-scroll-container {
      display: flex;
      overflow: auto hidden;
      scrollbar-width: none;
      gap: var(--sys-size-3);
      padding: var(--sys-size-3);
    }

    .scroll-button-container {
      position: absolute;
      top: 0;
      height: 100%;
      display: flex;
      align-items: center;
      width: var(--sys-size-15);
      z-index: 999;
    }

    .scroll-button-container.hidden {
      display: none;
    }

    .scroll-button-container.left {
      left: 0;
      background:
        linear-gradient(
          90deg,
          var(--sys-color-cdt-base-container) 0%,
          var(--sys-color-cdt-base-container) 50%,
          transparent
        );
    }

    .scroll-button-container.right {
      right: 0;
      background:
        linear-gradient(
          90deg,
          transparent,
          var(--sys-color-cdt-base-container) 50%
        );
      justify-content: flex-end;
    }
  }
}

.feedback-form {
  display: flex;
  flex-direction: column;
  gap: var(--sys-size-5);
  margin-top: var(--sys-size-4);
  background-color: var(--sys-color-surface3);
  padding: var(--sys-size-6);
  border-radius: var(--sys-shape-corner-medium-small);
  max-width: var(--sys-size-32);

  .feedback-input {
    height: var(--sys-size-11);
    padding: 0 var(--sys-size-5);
    background-color: var(--sys-color-surface3);
  }

  .feedback-input::placeholder {
    color: var(--sys-color-on-surface-subtle);
    font: var(--sys-typescale-body4-regular);
  }

  .feedback-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
  }

  .feedback-title {
    margin: 0;
    font: var(--sys-typescale-body3-medium);
  }

  .feedback-disclaimer {
    padding: 0 var(--sys-size-4);
  }
}