.ui.label.access-status {
  color: @white;
  width: max-content;

  &.open {
    background-color: @positiveColor;
  }

  &.restricted {
    background-color: @negativeColor;
  }

  &.embargoed {
    background-color: @warningColor;
  }

  &.metadata-only {
    background-color: @accessRightMetadataOnly;
  }
}

.ui.label {
  &.error {
    border-color: @errorTextColor;
    color: @errorTextColor;
  }

  &.transparent {
    background-color: transparent;
  }

  &.info {
    border: 1px solid @infoBorderColor;
    background-color: @infoBackgroundColor;
    color: @infoTextColor;
  }

  &.warning {
    border: 1px solid @warningColor;
    background-color: @warningBackgroundColor;
    color: @warningColor;
  }
}

.subject {
  display: inline-block;
  padding: .2rem .6rem;
  box-sizing: border-box;
  color: @mutedTextColor;
  border: 1px solid @borderColor;
  border-radius: @defaultBorderRadius;
  cursor: pointer;
}

a.subject:hover {
  background-color: lighten(@borderColor, 65%);
  color: darken(@mutedTextColor, 15%);
  text-decoration: none;
}

label.helptext {
  display: block;
  color: @mutedTextColor !important;
  font-weight: normal !important;
  font-size: 0.9em !important;
  margin-top: -0.8em; // counterweight Form field bottom margin
  margin-bottom: @defaultMargin;
}

.ui.form {
  .field {
    label.helptext {
      display: block;
      color: @mutedTextColor;
      font-weight: normal;
      font-size: 0.9em;
      margin-top: -0.8em; // counterweight Form field bottom margin
      margin-bottom: @defaultMargin;
    }

    &.inline {
      label.helptext {
        display: block;
        color: @mutedTextColor;
        font-weight: normal;
        font-size: 0.9em;
        margin-bottom: @defaultMargin;
        margin-top: 0.5 * (@defaultMargin);
      }
    }
  }
}

label.mobile-hidden {
  @media all and (max-width: @largestMobileScreen) {
    display: none;
  }
}


.ui.form .accordion-label {
  padding: 0.5rem 0.7rem !important;
  margin-left: 1rem;
  &.error {
    background-color: @errorTextColor;
    color: white;
  }
  &.info {
    background-color: @infoBackgroundColor;
    color: @infoTextColor;
  }
  &.warning {
    background-color: @warningBackgroundColor;
    color: @warningTextColor;
  }
}