/**
 * Analytics
 *
 * This file is licensed under the Affero General Public License version 3 or
 * later. See the LICENSE.md file.
 *
 * @author Marcel Scherello <analytics@scherello.de>
 * @copyright 2019-2022 Marcel Scherello
 */
.app-files .shareTabView {
  min-height: 100px;
}

#shareSearchResult {
    border: 1px solid var(--color-border-dark);
}

.shareSearchResultItem:hover {
    background-color: var(--color-background-hover);
}

.share-autocomplete-item {
  display: flex;

  &.merged {
    margin-left: 32px;
  }

  .autocomplete-item-text {
    margin-left: 10px;
    margin-right: 10px;
    white-space: nowrap;
    text-overflow: ellipsis;
    overflow: hidden;
    line-height: 32px;
    vertical-align: middle;
    flex-grow: 1;

    .ui-state-highlight {
      border: none;
      margin: 0;
    }
  }

  &.with-description {
    .autocomplete-item-text {
      line-height: 100%;
    }
  }

  .autocomplete-item-details {
    display: block;
    line-height: 130%;
    font-size: 90%;
    opacity: 0.7;
  }

  .icon {
    opacity: .7;
    margin-right: 7px;
  }

  .icon.search-globally {
    width: 32px;
    height: 32px;
    margin-right: 0;
  }
}

.shareTabView {
  .oneline {
    white-space: nowrap;
    position: relative;
  }

  .shareWithLoading {
    padding-left: 10px;
    right: 35px;
    top: 3px;
  }

  .shareWithConfirm {
    position: absolute;
    right: 2px;
    top: 6px;
    padding: 14px;
    opacity: 0.5;
  }

  .shareWithField:focus ~ .shareWithConfirm {
    opacity: 1;
  }

  .linkMore {
    position: absolute;
    right: -7px;
    top: -4px;
    padding: 14px;
  }

  .popovermenu {
    .linkPassMenu {
      input.error {
        border-color: var(--color-error) !important;

        &[type="submit"] {
          border-left: none;
        }
      }

      .share-pass-submit {
        width: auto !important;
      }

      .icon-loading-small {
        background-color: var(--color-main-background);
        position: absolute;
        right: 8px;
        margin: 3px;
        padding: 10px;
        width: 32px;
        height: 32px;
        z-index: 10;
      }
    }

    .datepicker {
      margin-left: 35px;
    }

    .share-add {
      input.share-note-delete {
        border: none;
        background-color: transparent;
        width: 44px !important;
        padding: 0;
        flex: 0 0 44px;
        margin-left: auto;

        &.hidden {
          display: none;
        }
      }
    }

    // note
    .share-note-form {
      span.icon-note {
        position: relative;
      }

      textarea.share-note {
        margin: 0;
        width: 200px;
        min-height: 70px;
        resize: none;

        + input.share-note-submit {
          position: absolute;
          width: 44px !important;
          height: 44px;
          bottom: 0;
          right: 10px;
          margin: 0;
          background-color: transparent;
          border: none;
          opacity: .7;

          &:hover,
          &:focus,
          &:active {
            opacity: 1;
          }
        }
      }

      // fix for popover link share
      &.share-note-link {
        margin-bottom: 10px;
      }
    }

    /* Border above last entry '+ Add another share' to separate it from current link settings */
    .new-share {
      border-top: 1px solid var(--color-border);
    }
  }

  .linkPass .icon-loading-small {
    margin-right: 0;
  }

  .icon {
    background-size: 16px 16px;
  }

  .shareWithList .icon-loading-small:not(.hidden) + span,
  .linkShareView .icon-loading-small:not(.hidden) + input + label:before {
    /* Hide if loader is visible */
    display: none !important;
  }

  input {
    &[type='checkbox'] {
      margin: 0 3px 0 8px;
      vertical-align: middle;
    }

    &[type='text'] {
      &.shareWithField,
      &.emailField {
        width: 100%;
        box-sizing: border-box;
        padding-right: 32px;
        text-overflow: ellipsis;
      }
    }

    &[type='text'].linkText,
    &[type='password'].linkPassText,
    &[type='password'].passwordField {
      width: 180px !important;
    }
  }

  form {
    font-size: 100%;
    margin-left: 0;
    margin-right: 0;
  }

  // share note on the sidebar
  .share-note {
    border-radius: var(--border-radius);
    margin-bottom: 10px;
    margin-left: 37px;
  }
}

// Sharing tab users list
.shareWithList {
  list-style-type: none;
  display: flex;
  flex-direction: column;

  > li {
    height: 44px;
    white-space: normal;
    display: inline-flex;
    align-items: center;
    position: relative;

    .avatar {
      width: 32px;
      height: 32px;
      background-color: var(--color-primary);
    }
  }

  .unshare img {
    vertical-align: text-bottom;
    /* properly align icons */
  }

  .sharingOptionsGroup {
    margin-left: auto;
    display: flex;
    align-items: center;
    white-space: nowrap;

    // icons
    > .icon:not(.hidden),
    .share-menu > .icon:not(.hidden) {
      padding: 14px;
      height: 44px;
      width: 44px;
      opacity: .5;
      display: block;
      cursor: pointer;

      &:hover,
      &:focus,
      &:active {
        opacity: .7;;
      }
    }

    // more menu
    > .share-menu {
      position: relative;
      display: block;
    }
  }

  .username {
    padding: 0 8px;
    overflow: hidden;
    white-space: nowrap;
    text-overflow: ellipsis;
  }
}

.ui-autocomplete {
  /* limit dropdown height to 6 1/2 entries */
  max-height: calc(36px * 6.5);
  overflow-y: auto;
  overflow-x: hidden;
  z-index: 1550 !important;
}

.notCreatable {
  padding-left: 12px;
  padding-top: 12px;
  color: var(--color-text-lighter);
}

.contactsmenu-popover {
  left: -6px;
  right: auto;
  padding: 3px 6px;
  top: 100%;
  margin-top: 0;

  li.hidden {
    display: none !important;
  }

  &:after {
    left: 8px;
    right: auto;
  }
}

.reshare,
#link label,
#expiration label {
  display: inline-flex;
  align-items: center;

  .avatar {
    margin-right: 5px;
  }
}

.resharerInfoView.subView {
  position: relative;
}