//////////////////////////////////////////////////////////////////////////////////////////
//   _  _ ____ _  _ ___  ____                                                           //
//   |_/  |__| |\ | |  \ |  |    This file belongs to Kando, the cross-platform         //
//   | \_ |  | | \| |__/ |__|    pie menu. Read more on github.com/kando-menu/kando     //
//                                                                                      //
//////////////////////////////////////////////////////////////////////////////////////////

// SPDX-FileCopyrightText: Simon Schneegans <code@simonschneegans.de>
// SPDX-License-Identifier: MIT

@use 'sass:color';

@use '../../variables.scss' as *;
@use '../../mixins.scss' as *;

.shortcutPicker {
  display: flex;
  gap: 2px;
  align-items: stretch;

  input {
    @include text-input;

    border-top-right-radius: 0;
    border-bottom-right-radius: 0;

    flex-grow: 1;
    min-width: 0;

    transition: box-shadow 150ms ease;

    &.invalid {
      box-shadow: 0 0 15px rgba(255, 64, 64, 1) inset;
    }

    // This class is used to add a pulsing glow to the textarea when recording user input.
    &.recording {
      box-shadow: 0 0 15px light-dark(rgba($key-dark, 0.3), rgba($key-light, 0.3)) inset;
      animation: glowing 1s infinite;
    }

    @keyframes glowing {
      0% {
        opacity: 0.7;
      }
      50% {
        opacity: 1;
      }
      100% {
        opacity: 0.7;
      }
    }
  }
}
