@import "../../../../../public/css/mixins";
@import "../../../../../public/css/variables";
@import "~material-components-web/material-components-web";

:host {
  display: block;
  width: 100%;
  margin: 0;
  padding: 0;
}

.knk-tags-input {
  padding-bottom: 5px;
  border-bottom: 1px solid #9b9b9b;

  &__search {
    opacity: 0.5;
    margin: 0;
    padding: 0;
    outline: 0;
    border: 0;
    @include knk-font-default;
    font-size: 14px;
    line-height: 1;
    @include ng-theming {
      background-color: theme-get(color-surface);
      color: theme-get(color-font);
    }
  }

  &__dropdown {
    margin-top: 50px;
  }

  &__dropdown-wrapper {
    position: relative;
    z-index: 50;
  }

  &__dropdown-menu {
    position: absolute;
    left: -20px;
    bottom: 20px;
    z-index: 50;
    margin: 0;
    padding: 0;
    border: solid 1px transparentize($knk-color-primary, 0.84);
    box-shadow: 0 0 12px 0 rgba(0, 0, 0, 0.3);
    background-color: #ffffff;

    &:after {
      content: '▼';
      position: absolute;
      z-index: 49;
      bottom: 0;
      margin-bottom: -40px;
      margin-left: calc(35% - 20px);
      color: #ffffff;
      font-size: 40px;
      text-shadow: 0 0 12px transparentize($knk-color-primary, 0.84), 0 0 12px rgba(0, 0, 0, 0.3);
    }
  }

  &__dropdown-list {
    display: block;
    position: relative;
    z-index: 50;
    overflow-x: hidden;
    overflow-y: auto;
    min-width: 200px;
    max-height: 200px;
    width: auto;
    height: auto;
    margin: 0;
    padding: 5px 0;
    background-color: #ffffff;
    text-align: left;
    list-style: none;
  }

  &__dropdown-item {
    padding: 10px 20px;
    background-color: #ffffff;
    cursor: pointer;
    @include knk-font-default;
    font-size: 12px;
    color: #323c47;

    &:hover {
      background-color: transparentize($knk-color-primary, 0.5);
    }
  }

  &::ng-deep {
    .mat-chip:not(.mat-basic-chip) {
      display: inline-block;
      margin: 8px 8px 0 0;
      padding: 2px 28px;
      outline: 0;
      border: solid 1px #bbbbbb;
      border-radius: 50px;
      background: transparent none;
      @include knk-font-default;
      font-size: 10px;
      line-height: 1.8;
      @include ng-theming {
        color: theme-get('color-font');
      }
    }

    .mat-chip-remove.mat-icon {
      @include ng-theming {
        color: theme-get('color-font');
      }
    }

    .mat-chip:not(.mat-basic-chip) + .mat-chip:not(.mat-basic-chip) {
      margin: 8px 8px 0 0;
    }
  }
}

.knk-tags-trash {
  cursor: pointer;
  @include ng-theming($if: default) {
    color: #BFBFBF;
  }
  @include ng-theming($not: default) {
    color: theme-get('color-font');
  }
}


label{
    font-weight: bold;
    color: #000;
}

.tags-panel{
    // position: absolute;
    background: #fff;
    // top: -10px;

    border: 1px solid #000;
    li{
        margin:5px;
    }
}

// .tags-panel:before {
//     content: '';
//     display: block;
//     position: absolute;
//     bottom: 100%;
//     width: 0;
//     height: 0;
//     max-height: 200px;
// }

// .tags-panel:before {
//     top:-20px; //50px / 2 - 4px
//     left:15px;
//     border: 10px solid transparent;
//     border-bottom-color: #fff;
//     //box-shadow: 0 16px 24px 2px rgba(0, 0, 0, 0.14), 0 6px 30px 5px rgba(0, 0, 0, 0.12), 0 8px 10px -5px rgba(0, 0, 0, 0.3);
// }

.angle{
  width: 14px;
  height: 14px;
  border-right: 1px solid black;
  border-bottom: 1px solid black;
  transform: rotate(45deg);
  margin-bottom: -16px;
  margin-left: 22px;
  background-color: #fff;
  position: relative;
}

.z-depth-5 {
    box-shadow: 0 16px 24px 2px rgba(0, 0, 0, 0.14), 0 6px 30px 5px rgba(0, 0, 0, 0.12), 0 8px 10px -5px rgba(0, 0, 0, 0.3);
  }


// @import url("//maxcdn.bootstrapcdn.com/font-awesome/4.1.0/css/font-awesome.min.css");
.search {
  position: relative;
  margin: 0 10px 10px -8px;
  width: 300px;
}

.search input {
  text-indent: 24px;
  min-height: 24px;
  text-align: left;
  width: 100%;
  direction: rtl;
}
.search .fa-search {
    position: relative;
    margin-left: -24px;
}

.tags-container {
    flex-grow: 1;
    overflow-x: hidden;
    overflow-y: auto;
    max-height: 350px;
    height: auto;
}

.other-tag{
    border: 0;
    border-bottom: 1px solid #000;
    max-width: 120px;
}

.knok-control{
    border: 2px solid #000;
}

.auto{
    margin: 10px 5px 0 5px;
    i{
        cursor: pointer;
        position: relative;
        margin-left: -26px;
    }
    input{
        width: 100%;
        border-radius: 4px;
        text-indent: 26px;
        direction: rtl;
        text-align: left;
    }
}
