
.record-share-modal {
  min-height: 35em;

  .share-content {
    min-height: 26em;
  }

  .share-description {
    margin: 1em auto;
  }
}

/* Styling for the community selection modal */

#community-selection-modal {

  .community-list-results.content {
    height: calc(55vh - 10em);

    .community-item {
      padding: @defaultPadding calc(@defaultPadding/2);
      border-bottom: 1px solid @borderColor;

      &:first-child,
      &:first-child + .mobile {
        padding-top: @defaultPadding !important; //overriding semantic ui's !important
        border-top: 1px solid @borderColor;
      }

      &:last-child {
        padding-bottom: @defaultPadding !important; //overriding semantic ui's !important
      }

      @media all and (max-width: @largestMobileScreen) {
        padding: @defaultPadding calc(@defaultPadding/4);
      }

      &.selected {
        background-color: lighten(@borderColor, 65%);
      }

      .header {
        a.ui.button.transparent {
          color: @linkColor;
        }
      }

      .extra {

        &.flex {
          display: flex;
        }

        &.width.auto {
          width: auto;
        }

        &.mt-0 {
          @media all and (max-width: @largestMobileScreen) {
            margin-top: .5 * @defaultMargin !important;
          }
        }
      }
    }
  }

  .community-list-result-item {
    .header {
      white-space: normal;
      text-overflow: ellipsis;
      overflow: hidden;
    }
  }

  .ui.segment {
    box-shadow: none;
  }

  .community-selected-item-container {
    min-height: 6rem;
    overflow-y: hidden;
  }
}


@media screen and (max-width: 850px) {
  #community-selection-modal {

    .community-selected-item-container {
      overflow-y: auto;
    }

    .community-list-result-item {
      margin: 0;
      flex-direction: row;
    }

    .community-list-result-item {
      overflow-y: auto;
    }

  }

}

// overrides default immediate parent rules
.ui.modal {
  .actions {
    background: @actionBackground;
    padding: @contentPadding;
    border-top: @actionBorder;
    text-align: @actionAlign;
  }

  .content {
    display: block;
    width: 100%;
    font-size: @contentFontSize;
    line-height: @contentLineHeight;
    padding: @contentPadding;
    background: @contentBackground;

    .ui.message .content {
      background: transparent;
      padding: 0;
    }
  }
}

.ui.modal .actions {
  .button {
    margin-left: @buttonDistance;
    margin-right: 0;

    &.left.floated{
      margin-right: @buttonDistance;
      margin-left: 0;
    }
  }
}

.ui.dimmer .ui.modal .ui.loader {
  &:before {
    border-color: @borderColor;
  }

  &:after {
    border-color: @mutedTextColor transparent transparent;
  }
}
