//////////////////////////////////////////////////////////////////////////////////////////
//   _  _ ____ _  _ ___  ____                                                           //
//   |_/  |__| |\ | |  \ |  |    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 *;

.tag {
  position: relative;
  display: inline-flex;
  justify-content: center;
  align-items: center;
  height: 20px;

  background-color: $widget-inverted;
  color: $text-always-light;
  border: none;

  border-radius: 9px 5px 5px 9px;
  white-space: nowrap;

  corner-bottom-left-shape: bevel;
  corner-top-left-shape: bevel;

  svg {
    position: relative;
    opacity: 0;
    transition: opacity 0.1s;
  }

  &:hover {
    background-color: $widget-inverted-hover;
  }

  &:hover svg {
    opacity: 1;
  }

  &:active {
    transform: translateY(1px);
  }

  // The dot representing the hole in the tag. We hide it on hover to create some sort of
  // transition to the close icon.
  &:after {
    content: '';
    position: absolute;
    left: 0.7em;
    top: 7px;
    width: 6px;
    height: 6px;
    border-radius: 50%;
    background: $text-always-light;
    transition: opacity 0.1s;
  }

  &:hover:after {
    opacity: 0;
  }
}
