@import '../../../../../../../styles/mixins/typography';
@import '../styles/variables/form-builder-style-utils.scss';

:host {
  display: block;
  width: 100%;
  height: auto;
  box-sizing: border-box;
}

.fb-field-dependent-dropdown-item {
  border: thin solid $color-smoke-100;
  margin-block-end: unset !important;
  padding-block: 8px;
  background-color: $color-milk;

  .fb-field-dropdown-item-delete-container {
    width: unset !important;

    &--not-deleteable {
      opacity: 0 !important;
      pointer-events: none;
      user-select: none;
    }
  }
}

.dropdown-item-selected {
  background-color: $color-azure-50;
}

.fb-field-dropdown-item {
  width: calc(100% + 24px + 8px);
  height: auto;
  margin-block-end: 12px;
  box-sizing: border-box;
  display: flex;

  // &:active,
  // &:focus,
  // &:focus-within,
  // &:focus-visible {
  //   outline: none;
  //   outline-width: 0;
  // }

  .fb-field-dropdown-item-drag-container {
    width: 24px;
    height: 32px;
    margin-inline-end: 8px;
    box-sizing: border-box;
    display: flex;
    align-items: center;
    justify-content: center;
    opacity: 1;
    cursor: move; /* fallback if grab cursor is unsupported */
    cursor: grab;
    cursor: -moz-grab;
    cursor: -webkit-grab;

    &--unsortable {
      opacity: 0;
      pointer-events: none;
      user-select: none;
    }

    &--disabled {
      opacity: 0.4;
      user-select: none;
      cursor: not-allowed;
    }
  }

  .fb-field-dropdown-item-input-container {
    width: calc(100% - 24px - 24px - 8px - 8px);
    height: auto;
    box-sizing: border-box;

    .fb-field-dropdown-item-required-input {
      width: 100%;
    }
  }

  .fb-field-dropdown-item-delete-container {
    width: 24px;
    height: 32px;
    margin-inline-start: 8px;
    box-sizing: border-box;
    display: flex;
    align-items: center;
    justify-content: center;
    opacity: 1;
    cursor: pointer;

    &--disabled {
      #{--fw-icon-color}: $color-smoke-700;
      cursor: not-allowed;
      user-select: none;
      opacity: 0.4;
    }

    #{--fw-icon-color}: $color-smoke-700;

    &:hover {
      #{--fw-icon-color}: $color-elephant-600;
      &--disabled {
        #{--fw-icon-color}: $color-smoke-700;
      }
    }
    &:active,
    &:focus {
      #{--fw-icon-color}: $color-elephant-900;
      &--disabled {
        #{--fw-icon-color}: $color-smoke-700;
      }
    }
  }
}
