@import 'https://lucy.im-in.space/LargePreviews.css?v=202402211714';
@import 'https://lucy.im-in.space/fonts/IosevkaCodeMin.css?v=28.1.0';

/* temp fixes */
/* put back some margin to the top */
body.flavour-glitch[class*="skin-modern"] .drawer__pager {
  margin-top: 1.5em;
}

/* z-index fix so the spoiler button doesn't go over the emoji picker
Disabled for now, let's see if still needed? It breaks some popups.
body > [data-popper-placement] {
  z-index: 150 !important;
}
*/

/* Weird flex but ok - actions under posts with Modern */
.layout-multiple-columns[class*='skin-modern']
  #mastodon
  .columns-area
  .detailed-status__action-bar,
.layout-multiple-columns[class*='skin-modern']
  #mastodon
  .columns-area
  .picture-in-picture__footer,
.layout-multiple-columns[class*='skin-modern']
  #mastodon
  .columns-area
  .status__action-bar {
  flex-wrap: nowrap;
}

/* Style code and pre>code */
.status__content code {
  background-color: var(--border-color, rgba(0, 0, 0, 20%));
  border-radius: var(--radius);
  font-family: 'Iosevka Nerd Font', Iosevka, 'Iosevka Web',
    mastodon-font-monospace, monospace;
  font-size: 0.9rem;
  font-stretch: expanded;
  padding: 0.1rem 0.3rem;
}

.status__content pre > code {
  display: block;
  padding: 0.5rem;
}

/* Cleaner CW borders */
.flavour-vanilla .content-warning::before,
.flavour-vanilla .content-warning::after{
    background: #e7b01c;
}

/* Global fixes */
.status__prepend {
  background-color: transparent !important;
}

.privacy-dropdown__dropdown .content {
  margin-left: 1em;
}

.privacy-dropdown__dropdown .content strong {
  font-weight: bold;
  display: block;
}

.drawer .drawer__inner__mastodon {
  pointer-events: none;
}

.about__domain-blocks__domain > p {
  display: none !important;
}

/* When the "content-type" button is shown we don't have too much space
   for the composers actions, so let's make some. */
.flavour-glitch .compose-form__buttons {
  gap: 4px;
}

.flavour-glitch .wide .columns-area:not(.columns-area--mobile) .drawer {
  min-width: 310px;
}

/* Fix about page spacings */
.about__section__body .prose summary h2 {
  cursor: pointer;
  display: inline-block;
  margin-bottom: 0;
  margin-top: 0.5em;
}

.about__section__body .prose img {
  margin: 0;
}

/* Ported from https://github.com/koyuspace/styles/blob/master/stickers.scss */

/*
.status__content .emojione:not([alt^=':sticker_']) {
  width: 32px !important;
  height: 32px !important;
  margin-top: 0px;
}
*/

.account__header__content img[alt^=':sticker_'],
.status__content img[alt^=':sticker_'] {
  width: 128px !important;
  height: 128px !important;
  display: block;
  margin: 0 auto !important;
}

div.emoji-mart-category > span[title^=':sticker_'] > span {
  width: 120px !important;
  height: 120px !important;
}

.emoji-mart-emoji[title^=':sticker_']:hover::before {
  border-radius: 10px !important;
}

span.reactions-bar__item__emoji > img[alt^=':sticker_'] {
  width: 16px !important;
  height: 16px !important;
}

.status__content .emojione:not([alt^=':sticker_']) {
  padding: 3px;
  margin: -3px;

  /* Don't limit emotes in width */
  max-height: 20px;
  max-width: 100%;
  width: auto;
}

/* Color some status */
.status[data-status-by='@kdy'] {
  box-shadow: inset 0 40px 40px 0 rgba(233, 30, 99, 20%);
}

.status[data-status-by='@status'],
.status[data-status-by^='@status@'] {
  box-shadow: inset 0 40px 40px 0 rgba(255, 165, 31, 20%);
}

.status[data-status-by*='@bird.makeup'] {
  box-shadow: inset 0 40px 40px 0 rgba(23, 120, 179, 15%);
}

.status[data-status-by*='@threads.net'] {
  box-shadow: inset 0 40px 40px 0 rgba(0, 0, 0, 20%);
}

/* Rotating space core */
.spacecore {
  -webkit-animation: rotate-core 15s linear infinite;
  animation: rotateCore 15s linear infinite;
  background: url('https://im-in.space/spacecore.png') no-repeat;
  background-size: cover;
  height: 150px;
  margin: 15px auto 30px;
  width: 150px;
}

@keyframes rotate-core {
  0% {
    transform: rotate(0deg);
  }

  20% {
    transform: rotate(20deg);
  }

  40% {
    transform: rotate(100deg);
  }

  60% {
    transform: rotate(220deg);
  }

  80% {
    transform: rotate(300deg);
  }

  100% {
    transform: rotate(360deg);
  }
}