/* UNOFFICIAL SOURCES INDICATOR */
// UNOFFICIAL SOURCES LIST
$unofficial: (
  'betterdocs.us',
  'discordsource.com'
);

html[lang] body #app-mount%appMount {
  %themeDark,
  %themeLight {
    %messageGroup %message %messageContent {
      // LINKS
      %markup %anchor%anchorUnderlineOnHover,
      %embed %anchor%embedLink {
        &[href] {
          height: auto !important;
          color: $main-color  !important;
          pointer-events: auto !important;
          cursor: pointer !important;
          &:before,
          &:after {
            display: none !important;
          }
        }
      }
      %markup %anchor%anchorUnderlineOnHover,
      %embed %anchor%embedLink {
        @each $e in $unofficial {
          &[href*='#{$e}' i] {
            position: relative;
            color: transparent !important;
            cursor: not-allowed !important;
            transition: all 0.3s ease-in-out;
            &:before {
              position: absolute;
              @include stretch;
              padding: 0 !important;
              margin: 0 !important;
              display: block !important;
              background: cv('colors.danger') !important;
              border: none !important;
              border-radius: 3px !important;
              color: #fff !important;
              text-align: center !important;
              text-shadow: none;
              opacity: 0.7;
              transition: all 0.3s ease-in-out;
              z-index: 1;
            }
            &:hover {
              color: cv('colors.danger') !important;
              &:before {
                opacity: 0;
              }
            }
          }
        }
      }
      %markup %anchor%anchorUnderlineOnHover {
        @each $e in $unofficial {
          &[href*='#{$e}' i] {
            &:before {
              content: '\26A0  Unofficial source' !important;
            }
          }
        }
      }
      %embed %anchor%embedLink {
        @each $e in $unofficial {
          &[href*='#{$e}' i] {
            &:before {
              content: '\26A0  Unofficial theme/plugin source' !important;
            }
          }
        }
      }

      // EMBED THUMBNAIL
      %embed %embedThumbnail {
        display: block !important;
        @each $e in $unofficial {
          &[href*='#{$e}' i] {
            position: relative;
            cursor: not-allowed;
            >img {
              opacity: 0;
              transition: all 0.3s ease-in-out;
            }
            &:before {
              content: '\26A0';
              position: absolute;
              @include stretch;
              display: flex;
              align-items: center;
              justify-content: center;
              background: cv('colors.danger');
              border-radius: inherit;
              color: #fff;
              opacity: 0.7;
              transition: all 0.3s ease-in-out;
              z-index: 1;
            }
            &:hover {
              >img {
                opacity: 1;
              }
              &:before {
                opacity: 0;
              }
            }
          }
        }
      }

      // INVITE LINK
      %inviteGuildIcon {
        &:after {
          display: none !important;
        }
        ~%inviteButton {
          display: flex !important;
        }
        &[style*='icons/153708594091655168/'] {
          background-size: 0;
          &:before {
            content: '';
            position: absolute;
            @include stretch;
            background: inherit;
            background-size: 100% 100%;
            border-radius: inherit;
            opacity: 0;
            transition: all 0.3s ease-in-out;
          }
          &:after {
            content: '\26A0' !important;
            position: absolute;
            @include stretch;
            width: auto !important;
            height: auto !important;
            padding: 0 !important;
            margin: 0 !important;
            display: flex !important;
            align-items: center;
            justify-content: center;
            background: cv('colors.danger') !important;
            border: none !important;
            border-radius: inherit !important;
            color: #fff !important;
            background: cv('colors.danger');
            opacity: 0.7;
            transition: all 0.3s ease-in-out;
            z-index: 1;
          }
          &:hover {
            &:before {
              opacity: 1;
            }
            &:after {
              opacity: 0;
            }
          }
          ~%inviteGuildInfo {
            %inviteGuildName {
              position: relative;
              color: transparent;
              cursor: not-allowed;
              transition: all 0.3s ease-in-out;
              &:before {
                content: '\26A0  Unofficial source';
                position: absolute;
                @include stretch;
                background: cv('colors.danger');
                border-radius: 3px;
                color: #fff;
                text-align: center;
                text-shadow: none;
                opacity: 0.7;
                transition: all 0.3s ease-in-out;
                z-index: 1;
              }
              &:hover {
                color: cv('colors.danger');
                &:before {
                  opacity: 0;
                }
              }
            }
            %inviteStatusOnline {
              background: cv('colors.danger');
              color: cv('colors.danger');
            }
          }
          ~%inviteButton {
            cursor: not-allowed;
            &%inviteButtonAccept {
              border-color: cv('colors.danger');
              &:hover {
                background: cv('colors.danger');
              }
              %buttonContents {
                &:before {
                  content: '\26A0';
                  margin-right: 5px;
                }
              }
            }
            &%inviteButtonJoined {
              background: cv('colors.danger');
            }
          }
        }
      }
    }
  }
}