base_ui/assets/common/scss/components/_share-modal.scss

.share-modal {
  width: 337px;
  height: 385px;
  background-color: var(--color-11);
  border: 1px solid #bac4ce;
  // @include border(1px,var(--color-7));
  border-radius: 20px;
  top: 63px;
  left: 253px;
  transform: unset;

  &__modal {
    .modal-dialog {
      transform: unset !important;
      transition: unset !important;
    }
  }

  &__content {
    position: relative;
    width: 337px;
    height: 385px;
    display: flex;
    flex-direction: column;
  }

  &__search-content {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    transition: all 0.3s ease-in-out;
  }

  &__search {
    border-bottom: 1px solid #f1f1f1;
    // @include border-bottom(1px, var(--color-8));
    display: flex;
    align-items: center;
    padding-top: 15px;
    padding-bottom: 15px;

    span {
      font-size: 16px;
      color: var(--color-2);
      width: 50px;
      display: flex;
      justify-content: center;

      i {
        cursor: pointer;
        color: var(--color-9);
        font-size: 24px;
        width: 70px;
        display: flex;
        justify-content: center;
        align-items: center;
      }
    }

    #get-back {
      width: 70px;
    }

    input {
      flex-grow: 2;
      border: unset;
      outline: unset;
      color: var(--color-2);
      font-size: 14px;

      // &::placeholder {
      //   color: var(--color-9);
      //   font-size: 14px;
      // }
    }
  }

  &__add-person {
    width: 50px;
    display: flex;
    justify-content: center;

    i {
      font-size: 24px;
      -webkit-transition: all 0.5s ease-in-out;
      transition: all 0.5s ease-in-out;
      font-size: 23px;
      background: -webkit-linear-gradient(#a9bdc4 0%, #c6cfda 100%);
      background-clip: border-box;
      -webkit-background-clip: text;
      -webkit-text-fill-color: transparent;
    }

    &:hover {
      i {
        background: -webkit-linear-gradient(#00b6e3 0%, #81e6ff 100%);
        background-clip: border-box;
        -webkit-background-clip: text;
        -webkit-text-fill-color: transparent;
      }
    }
  }

  &__search-recommend {
    display: none;
    opacity: unset;
    visibility: hidden;
    position: absolute;
    top: 57px;
    right: 0px;
    width: 100%;
    height: calc(100% - 57px);
    background: var(--color-14);
    transition: all 0.3s ease-in-out;
    opacity: 0;
    visibility: hidden;
    display: none;
    z-index: 10;

    .os-host {
      height: 100%;
    }

    .os-host-resize-disabled.os-host-scrollbar-horizontal-hidden
      > .os-scrollbar-vertical {
      bottom: 0;
      right: 7px;
      top: 17px;
      width: 0px;
    }

    .os-theme-dark
      > .os-scrollbar
      > .os-scrollbar-track
      > .os-scrollbar-handle {
      background: var(--color-27);
    }
  }

  &__users {
    flex-grow: 1;
    max-height: 259px;

    .os-scrollbar-vertical {
      width: 0;
    }
  }

  &__icon {
    display: flex;
    justify-content: center;
    align-items: center;
    margin-bottom: 18px;

    img {
      width: 142px;
      padding-top: 42px;
    }
  }

  &__text {
    color: var(--color-9);
    font-size: 14px;
    padding-bottom: 37px;
    width: 246px;
    text-align: center;
    margin-right: auto;
    margin-left: auto;
  }

  &__search-content-footer {
    display: flex;
    align-items: flex-end;
    justify-content: space-between;
    padding-top: 15px;
    padding-bottom: 15px;
    border-top: 1px solid #bac4ce;
    // @include border-top(1px, var(--color-7));
    padding-right: 22px;
    padding-left: 22px;
  }

  &__sign {
    display: flex;
    flex-direction: column;

    span {
      font-size: 12px;
      color: var(--color-9);
      display: block;
      margin-bottom: 2px;
    }

    a {
      color: var(--color-1);
      font-size: 12px;
    }
  }

  &__settings {
    a {
    }
  }

  &__settings-btn {
    font-size: 14px;
    color: var(--color-1);
  }

  &__settings-content {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    transition: all 0.3s ease-in-out;
    opacity: 0;
    visibility: hidden;
    display: none;
  }

  &__title {
    padding-top: 15px;
    padding-bottom: 15px;
    border-bottom: 1px solid #f1f1f1;
    // @include border-bottom(1px, var(--color-8));
    padding-right: 22px;
    padding-left: 22px;

    h4 {
      font-size: 16px;
    }
  }

  &__form {
    padding-right: 22px;
    padding-left: 22px;

    &-question {
      font-size: 14px;
      font-weight: 500;
      text-shadow: 0 -0.75px #6b6b6b;
      margin-bottom: 17px;
      color: var(--color-2);
    }

    &-item {
      padding-top: 17px;

      &:last-child {
        margin-bottom: 17px;
      }
    }

    &-radio-item {
      display: flex;
      align-items: center;

      &:not(:last-child) {
        margin-bottom: 20px;
      }

      input {
      }

      label {
        color: var(--color-2);
        font-size: 14px;
        margin-right: 16px;
        margin-bottom: 0;
      }
    }

    &-btn {
      min-width: 57px;
      height: 32px;
      border-radius: 20px;
      display: flex;
      justify-content: center;
      align-items: center;
      margin-right: 10px;
    }

    &-radio {
      position: relative;

      input {
        position: absolute;
        opacity: 0;
        cursor: pointer;
        height: 20px;
        width: 20px;
        z-index: 5;
      }

      span {
        display: flex;
        height: 20px;
        width: 20px;
        border-radius: 50%;
        border: 2px solid #bac4ce;
        //  @include border(2px,var(--color-7));
        transition: all 0.3s ease-in-out;
        display: flex;
        justify-content: center;
        align-items: center;

        &::before {
          content: " ";
          width: 10px;
          height: 10px;
          border-radius: 50%;
          display: flex;
          background: linear-gradient(#3def90 0%, #1ed975 100%);
          opacity: 0;
          transition: all 0.3s ease-in-out;
        }
      }

      input:checked ~ span::before {
        opacity: 1;
      }
    }
  }

  &__form-btn--deactive {
    font-size: 14px;
    color: var(--color-2);

    &:hover {
      opacity: 0.8;
    }
  }

  &__from-btn--active {
    border: 2px solid #00b6e3;
    //  @include border(2px,var(--color-1));
    color: var(--color-1);
    font-size: 14px;

    &:hover {
      color: var(--color-14);
      background: var(--color-1);
    }
  }

  &__setting-footer {
    margin-top: auto;
    border-top: 1px solid #f1f1f1;
    // @include border-top(1px, var(--color-8));
    display: flex;
    align-items: center;
    justify-content: flex-end;
    padding: 16px;
  }

  &__people-search {
    background: var(--color-11);
    position: absolute;
    top: 0;
    display: none;

    left: 0;
    width: 100%;
    height: 100%;
    transition: all 0.3s ease-in-out;
    opacity: 0;
    visibility: hidden;

    .os-host {
      height: 100%;
    }

    .os-host-resize-disabled.os-host-scrollbar-horizontal-hidden
      > .os-scrollbar-vertical {
      bottom: 0;
      right: 7px;
      top: 17px;
      width: 0px;
    }

    .os-theme-dark
      > .os-scrollbar
      > .os-scrollbar-track
      > .os-scrollbar-handle {
      background: var(--color-27);
    }
  }

  &__user-search-content {
    opacity: unset;

    width: 100%;
    height: calc(100% - 57px);
    background: var(--color-14);
    transition: all 0.3s ease-in-out;
    top: 57px;
    display: none;

    .os-host {
      height: 100%;
    }

    .os-host-resize-disabled.os-host-scrollbar-horizontal-hidden
      > .os-scrollbar-vertical {
      bottom: 0;
      right: 7px;
      top: 17px;
      width: 0px;
    }

    .os-theme-dark
      > .os-scrollbar
      > .os-scrollbar-track
      > .os-scrollbar-handle {
      background: var(--color-27);
    }
  }

  &__users-footer {
    display: flex;
    flex-direction: column;
  }

  &__textarea {
    border-top: 1px solid #f1f1f1;
    // @include border-top(1px, var(--color-8));
    padding-top: 12px;
    padding-bottom: 12px;
    padding-right: 22px;
    padding-left: 22px;
  }

  &__invite-row {
    border-top: 1px solid #f1f1f1;
    // @include border-top(1px, var(--color-8));
    display: flex;
    align-items: center;
    padding-top: 17.5px;
    padding-bottom: 26px;
    justify-content: space-between;
    padding-right: 22px;
    padding-left: 22px;
  }

  &__select {
    font-size: 14px;

    .main-page__date-select .select-selected {
      border: unset;
      padding: 0;
    }

    .main-page__date-select .select-selected {
      height: 32px;
    }

    .select-items {
      width: 160px;
    }

    .main-page__date-select .select-items {
      top: unset;
      bottom: calc(5px + 100%);
    }
  }

  &__send-invite {
    a {
      display: flex;
      justify-content: center;
      align-items: center;
      min-width: 120px;
      border-radius: 20px;
      border: 2px solid #00b6e3;
      //  @include border(2px,var(--color-1));
      height: 32px;
      font-size: 14px;

      &:hover {
        color: var(--color-14);
        background: var(--color-1);
      }
    }
  }
}