@import "../../styles/variables";

:host {
  .tabbed-group-picker-button {
    .tabbed-group-picker-button-label {
      overflow: hidden;
      text-overflow: ellipsis;
      white-space: nowrap;
      min-width: 40px;
      width: 100%;
    }
  }
}

::ng-deep .dropdown-container {
  .tabbed-group-picker-search {
    width: 100%;
    padding: 0.5em;
    border-bottom: 0.1em solid #ccc;
    position: relative;
    input {
      background: transparent;
      border: none;
      border-radius: 0;
      outline: none;
      height: 2rem;
      width: 95%;
      padding: 0;
      box-shadow: none;
      box-sizing: content-box;
      transition: all 300ms;
      color: $dark;
      &::placeholder {
        color: var(--form-placeholder);
      }
    }
    i.bhi-search,
    i.bhi-times {
      position: absolute;
      bottom: 1em;
      right: 0.5em;
      color: $grey;
      font-size: 1.2rem;
      margin-right: 1em;
    }
    i.bhi-times {
      cursor: pointer;
    }
  }

  .footer {
    background: var(--background-main);
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 1rem;
  }

  .tabbed-group-picker-column-container {
    display: flex;
    flex-direction: row;
    user-select: none;

    .tabbed-group-picker-column {
      display: flex;
      flex-direction: column;
      align-items: center;

      &.left {
        border-right: 1px solid $light;
        justify-content: space-between;

        .clear-all-button {
          margin-bottom: 0.5em;
        }

        novo-nav {
          overflow: auto;

          > novo-tab {
            min-height: 3em;

            > .novo-tab-link {
              max-width: 100%;
              height: 100%;
              display: flex;
              justify-content: space-between;
              align-items: center;
            }
            &.active {
              .novo-tab-link {
                font-weight: 400;
              }
              &:hover {
                .novo-tab-link {
                  font-weight: 400;
                  color: $positive;
                }
              }
            }
            &:hover {
              .novo-tab-link {
                font-weight: 400;
                color: $black;
                opacity: 1;
              }
            }
          }
        }
      }

      &.right {
        display: block;
        width: 23em;
        overflow: hidden;

        .quick-select {
          font-weight: 500;

          .quick-select-label {
            padding: 0.7em 1.9em 0 1.9em;
            background: lighten($light, 10%);
            text-transform: uppercase;
            font-size: 0.8em;
          }

          .quick-select-list {
            .quick-select-item {
              background: lighten($light, 10%);
              padding: 0.5em 0.8em;
              border-bottom: none;
            }
          }
        }
        novo-optgroup {
          cdk-virtual-scroll-viewport {
            height: 27em;
            overflow-x: hidden;
            @media (max-height: 720px) {
              height: 18em;
            }
          }

          novo-option {
            &:hover.novo-option-inert {
              background: var(--background-main, rgba($ocean, 0.1));
            }
          }
        }

        .tabbed-group-picker-empty-item {
          display: flex;
          flex-direction: column;
          align-items: center;
          justify-content: center;
          color: $grey;
          width: 100%;
          height: 27em;

          i {
            padding-bottom: 0.2em;
            font-size: 3em;
          }
          .empty-item-main-message {
            font-weight: 500;
            color: $dark;
          }
          .empty-item-sub-message {
            font-size: 0.9em;
          }
        }
      }
    }
  }
}