@import '../common/var-nb.scss';
@import '../mixins/utils.scss';
@import '../mixins/mixins.scss';

/* panel-list
 ----------------------------*/

@include b(panel-list-item) {
  display: flex;
  padding: 13px 10px;
  border-radius: 10px;
  cursor: pointer;
  justify-content: space-between;
  text-decoration: none;
  font-size: $--size-font-small;
  color: $--color-font;  
  &:hover {
    background-color: $--color-background; 
  } 
}

@include b(panel-list-item-left) {
  position: relative;
}

@include b(panel-list-item-title) {
  @include utils-ellipsis();
}

@include b(panel-list-item-tag) {
  height: 16px;
  line-height: 10px;
  padding: 2px;
  position: absolute;
  right:-5px;
  top: -10px;
  transform: translateX( 100% );
  background-color: #ff0000;
  color: $--color-white;
  text-align: center;
  font-size: $--size-font-small;
  &:before {
    content: '';    
    position: absolute;
    left: 2px;
    bottom: 0;
    transform: translateY( 100% );
    width:0; 
    height:0;
    border-width: 2px;
    border-style:solid;
    border-color:red transparent transparent red;
  } 
}