@import "../../themes/anywhere.globals.scss";

/**
 * CSS variables for the listbox component.
 *
 * @prop --inputListMinWidth: The minimum width of the input list.
 * @prop --inputListBg: The background color of the input list.
 * @prop --inputListPadding: The padding of the input list.
 * @prop --inputListItemPadding: The padding of each item in the input list.
 * @prop --inputListItemBgColor: The background color of each item in the input list.
 * @prop --inputListItemTextColor: The text color of each item in the input list.
 * @prop --inputListItemHoverBgColor: The background color of each item in the input list on hover.
 * @prop --inputListItemHoverTextColor: The text color of each item in the input list on hover.
 * @prop --inputListItemHighlightBgColor: The background color of the highlighted item in the input list.
 * @prop --inputListItemHighlightTextColor: The text color of the highlighted item in the input list.
 * @prop --inputListItemBorder: The border of each item in the input list.
 * @prop --inputListItemMargin: The margin of each item in the input list.
 * @prop --inputListItemFocusShadow: The shadow of each item in the input list on focus.
 * @prop --inputListItemTransition: The transition properties of each item in the input list.
 * @prop --inputListItemDividerColor: The color of the divider in the input list.
 * @prop --inputListHeaderPadding: The padding of the header in the input list.
 * @prop --inputListHeaderMargin: The margin of the header in the input list.
 * @prop --inputListHeaderBg: The background color of the header in the input list.
 * @prop --inputListHeaderTextColor: The text color of the header in the input list.
 * @prop --inputListHeaderBorder: The border of the header in the input list.
 * @prop --inputListHeaderSearchIconColor: The color of the search icon in the header of the input list.
 * @prop --inputListHeaderCloseIconColor: The color of the close icon in the header of the input list.
 * @prop --inputListHeaderCloseIconHoverColor: The hover color of the close icon in the header of the input list.
 * @prop --inputListHeaderCloseIconTransition: The transition properties of the close icon in the header of the input list.
 * @prop --inputListBorder: The border of the input list.
 */
:host {
  display: block;

  .any-listbox-list {
    list-style-type: none;
    margin: 0;
    padding: 0;
  }

  .any-listbox-item {
    cursor: pointer;
    position: relative;
    overflow: hidden;
    -webkit-user-select: none;
    -ms-user-select: none;
    user-select: none;
  }

  .any-listbox {
    display: block;
    padding: 0;
    border: var(--inputListBorder);
    background-color: var(--inputListBg);

    .any-listbox-header {
      padding: var(--inputListHeaderPadding);
      border-bottom: var(--inputListHeaderBorder);
      color: var(--inputListHeaderTextColor);
      background: var(--inputListHeaderBg);
      margin: var(--inputListHeaderMargin);
      border-top-right-radius: var(--borderRadius);
      border-top-left-radius: var(--borderRadius);
      display: flex;
      align-items: center;

      .any-listbox-search-icon {
        color: var(--text-color-secondary);
      }

      .any-listbox-filter {
        width: 100%;
      }

      any-checkbox {
        margin-right: 0.5rem;
      }
    }

    .any-listbox-list-wrapper {
      overflow: auto;

      .any-listbox-list {
        padding: var(--inputListPadding);

        .clusterize-no-data {
          padding: var(--inputListItemPadding);
        }

        .any-listbox-item {
          margin: var(--inputListItemMargin);
          padding: var(--inputListItemPadding);
          border: var(--inputListItemBorder);
          color: var(---inputListItemTextColor);
          transition: box-shadow 0.15s;
          border-radius: 0;
          font-weight: var(--fontWeight);
          display: flex;
          align-items: center;

          &:not(.any-highlight):not(.any-disabled):focus {
            outline: 0;
            outline-offset: 0;
            box-shadow: var(--inputListItemFocusShadow);
          }

          &:not(.any-highlight):not(.any-disabled):hover {
            color: var(--inputListItemHoverTextColor);
            background: var(--inputListItemHoverBgColor);
          }

          &.any-highlight {
            color: var(--inputListItemHighlightTextColor);
            background: var(--inputListItemHighlightBgColor);
          }

          any-checkbox {
            margin-right: 0.5rem;
          }
        }

        .any-listbox-empty-message {
          padding: var(--inputListItemPadding);
          color: var(---inputListItemTextColor);
          background: transparent;
        }
      }
    }
  }
}
