$height: 48px;

.uiDropdown {
  display: flex;
  justify-content: center;
  align-items: center;
  .label {
    text-align: left;
  }
  .wrapper {
    position: relative;
    width: 100%;
    max-width: 380px;

    &.isOpen {
      .control {
        z-index: 4;
      }
      .dropdownArrow {
        transform: rotate(-45deg);
      }
    }
  }

  .control,
  .option {
    display: flex;
    align-items: center;
    justify-content: flex-start;
    cursor: pointer;
    white-space: nowrap;
    text-overflow: ellipsis;
    overflow: hidden;
    cursor: pointer;
    width: 100%;
    text-align: left;
    transition: background-color 0.3s;
    span {
      width: 100%;
      overflow: hidden;
      text-overflow: ellipsis;
    }
  }

  .control {
    padding: 0 48px 0 16px;
  }

  .option {
    background: none;
    padding: 0 16px;
  }

  .dropdownContent {
    max-height: $height * 3 + (16 * 2);
    padding: 16px 0;
    overflow-y: auto;
    overflow-x: hidden;
  }

  .dropdownArrow {
    position: absolute;
    border-style: solid;
    border-width: 2px 2px 0 0;
    content: '';
    display: inline-block;
    height: 8px;
    transform: translateY(-50%) rotate(135deg);
    transform-origin: center;
    width: 8px;
    transition: transform 0.5s;
    right: 16px;
    top: 50%;
  }
}
