.dropdown_with_confirm {
  &__container {
    display: flex;
    gap: 5px;
  }

  position: relative;
  background: #f4f4f4;
  border-radius: 38px;
  min-width: 100px;
  display: flex;
  align-items: center;
  &#active {
    border-bottom: none;
    border-radius: 28px 28px 0 0;

    & .dropdown_with_confirm__active_option {
      cursor: pointer;
      padding: 7px 0;
      padding-left: 14px;
      display: flex;
      align-items: center;
      justify-content: flex-start;
      gap: 0.25rem;
      width: 100%;
      height: 100%;
    }
  }

  &__active_option {
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 0.25rem;
    width: 100%;
    height: 100%;
  }

  &__options {
    position: absolute;
    top: 100%;
    display: none;
    z-index: 999999;
    width: 100%;
    background: #f4f4f4;
    border-top: 0;
    border-radius: 0 0 28px 28px;
    &#show {
      display: flex;
      flex-direction: column;
      padding-bottom: 12px;
    }
    &__option {
      padding: 7px 0;
      padding-left: 14px;
      display: flex;
      align-items: center;
      cursor: pointer;
      &:hover {
        background: #cbdffe;
      }
      &:last-of-type {
        border-radius: 0 0 8px 8px;
      }
    }
  }
  &__confirm {
    height: 35px;
    aspect-ratio: 1;
    padding: 11px;
    background: black;
    border-radius: 100%;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    border: 2px solid transparent;

    &__icon {
      color: #ffffff;
    }
  }
  &__cancel {
    height: 35px;
    aspect-ratio: 1;
    padding: 11px;
    border: 2px solid #f0f0f0;
    border-radius: 100%;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
  }
}
