.dropdowns--main-container {
  width: fit-content;
  height: fit-content;
  position: relative;
  padding: 1px;

  &[data-full-width="true"] {
    width: 100%;
  }
}

.dropdowns--main-container:has(.dropdowns--menu:not([hidden]):not(.invisible)) > .dropdowns--trigger-button.primary {
  background-color: var(--surface-action-active);

  span.icon {
    rotate: -180deg;
  }  
}

.dropdowns--main-container:has(.dropdowns--menu:not([hidden]):not(.invisible)) > .dropdowns--trigger-button {
  span.icon[data-chevron="true"] {
    rotate: -180deg;
  }
}

.dropdowns--trigger-button {
  padding: .5rem;
  border-radius: var(--table-radius);
  background-color: white;
  outline: solid 1px var(--neutral-200);
  box-shadow: 0 2px 4px -2px var(--neutral-100);
  font-size: var(--rem-13);
  color: var(--neutral-500);
  z-index: 999;
  display: block;
  line-height: 1rem;
  display: flex;
  flex-direction: row;
  align-items: center;
  justify-content: center;
  gap: .5rem;

  span.icon {
    transition: rotate .3s ease-in-out;
  }

  span.dropdowns--trigger-label {
    font-size: var(--rem-13);
    color: var(--text-action-neutral);
    max-width: 25ch;
    text-overflow: ellipsis;
    overflow: hidden;
    white-space: nowrap;

    &:empty {
      display: none;
    }
  }

  &[data-disabled="true"][data-should-hide-label-on-disabled="true"] {
    span.dropdowns--trigger-label {
      display: none;
    }
  }

  &[data-select="true"] {
    border-radius: var(--select-item-radius);
    padding: .5rem .75rem;
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: space-between;
    gap: .5rem;
    min-width: 8rem;
  }

  &[data-button-select="true"] {
    min-width: unset;
    justify-content: flex-start;
    padding: .5rem;
    gap: .25rem;
  }

  &[data-error="true"] {
    outline: solid 1px var(--error-500);
  }

  &[data-disabled="true"] {
    outline: solid 1px var(--neutral-200);
    opacity: 0.3;
    pointer-events: none;
    cursor: not-allowed;
  }

  &:has(.tasks--assignee-initials:not([data-empty="true"])) {
    padding: 6px .5rem;
  }

  &[data-full-width="true"] {
    width: 100%;
  }

  &[data-calendar-full-width="true"] {
    padding: .5rem .75rem;
    justify-content: space-between;
  }
  
  &.primary {
    background-color: var(--surface-action);
    box-shadow: var(--shadow-green-sm);
    border: none;
    outline: none;

    &:active {
      background-color: var(--surface-action-active);
    }
    
    span.dropdowns--trigger-label {
      color: var(--text-on-action);
      font-variation-settings: 'wght' var(--text-medium);
      font-size: var(--rem-13);
      line-height: var(--rem-15);
      letter-spacing: 0;
    }
  }
}

.dropdowns--menu {
  padding: .25rem;
  position: fixed;
  border-radius: var(--table-radius);
  background-color: white;
  outline: solid 1px var(--neutral-200);
  box-shadow: 0 4px 12px -2px rgba(88, 107, 121, 0.2);
  z-index: 1000;
  max-height: 300px;
  overflow-y: auto;

  /* I need to override this to be able to access the menu's dimensions when it's hidden */
  /* Having 'display: none' means all dimensions in js are set to 0 until you show it */
  &[hidden] {
    display: block !important;
    visibility: hidden;

    * {
      visibility: hidden;
    }
  }

  &:not([hidden]):not(:has(*)) {
    display: none;
  }
}

.dropdowns--main-container[data-has-multiple-selected="true"] > .dropdowns--trigger-button:has(svg[data-multi="true"]) {
  svg[data-multi="true"] {
    display: block;
  }
  svg[data-multi="false"] {
    display: none;
  }
}

.dropdowns--main-container[data-has-multiple-selected="false"] > .dropdowns--trigger-button:has(svg[data-multi="false"]) {
  svg[data-multi="false"] {
    display: block;
  }
  svg[data-multi="true"] {
    display: none;
  }
}

.dropdowns--link-menu-item {
  background-color: transparent;
  width: 100%;
  padding: .5rem;
  display: flex;
  flex-direction: row;
  align-items: center;
  justify-content: flex-start;
  gap: .5rem;
  color: var(--text-action-neutral);
  font-size: var(--rem-13);
  text-decoration: none;
  font-variation-settings: 'wght' var(--text-medium);
  line-height: 1rem;
  letter-spacing: 0;
  border-radius: var(--radius-sm);

  &:hover,
  &:active,
  &[data-active="true"] {
    background-color: var(--surface-subtle);
  }

  &:has([data-right-icon="true"]) > [data-right-icon="true"] {
    margin-right: 0;
    margin-left: auto;
  }

  > * {
    pointer-events: none;
  }
}

.patient-new-item-dropdown > .dropdowns--menu {
  max-height: unset;
}