//////////////////////////////////////////////////////////////////////////////////////////
//   _  _ ____ _  _ ___  ____                                                           //
//   |_/  |__| |\ | |  \ |  |    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 '../../variables.scss' as *;

.itemArea {
  position: relative;
  display: flex;
  flex-direction: column;
  justify-content: center;
  color: #fff;

  .deleteDropOverlay {
    position: absolute;
    top: -20px;
    left: 0;
    right: 0;
    bottom: 0;

    display: flex;
    align-items: center;
    justify-content: center;

    backdrop-filter: blur(8px);

    color: $text-normal;
    font-weight: 700;
    text-transform: uppercase;
    pointer-events: none;
    transition: opacity 0.15s ease;
  }

  .header {
    display: flex;
    align-items: flex-end;

    .leftLine {
      background-image: linear-gradient(
        to left,
        rgba(255, 255, 255, 1) 0%,
        rgba(255, 255, 255, 0) 80%
      );
      height: 1px;
      flex-grow: 1;
    }

    .rightLine {
      background-image: linear-gradient(
        to right,
        rgba(255, 255, 255, 1) 0%,
        rgba(255, 255, 255, 0) 80%
      );
      height: 1px;
      flex-grow: 1;
    }

    .title {
      border: 1px solid rgba(255, 255, 255, 1);
      background-color: light-dark(rgba($base-dark, 0.3), rgba($base-light, 0.3));
      border-radius: 8px 8px 0 0;
      border-width: 1px 1px 0 1px;
      padding: 5px 10px;
    }
  }

  .shadow {
    background-image: radial-gradient(
      ellipse at 50% 0%,
      light-dark(rgba($base-dark, 0.3), rgba($base-light, 0.3)) 10%,
      light-dark(rgba($base-dark, 0), rgba($base-light, 0)) 70%
    );
    height: 80px;
    margin-bottom: -80px;
  }

  .newItems {
    word-wrap: break-word;
    text-align: center;
    padding: 10px;

    & > * {
      display: inline-block;
    }
  }
}
