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

@scope to (devtools-widget > *) {
  .ai-assistance-feedback-row {
    font-family: var(--default-font-family);
    width: 100%;
    display: flex;
    gap: var(--sys-size-8);
    justify-content: space-between;
    align-items: center;
    margin-block: calc(-1 * var(--sys-size-3));

    .action-buttons {
      display: flex;
      align-items: center;
      gap: var(--sys-size-2);
      padding: var(--sys-size-4) 0;
    }

    .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);
      width: auto;
    }

    .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);
    }
  }
}