/**
 * @name ButterSmooth
 * @author Lonk#6942
 * @version 0.5.0
 * @description Buttery Smooth
 * @invite zmskc7Fz9z
 * @authorId 557388558017495046
 * @source https://github.com/Lonk12
*/

/* Emoji Auto-Fill Animation */
.base-2v-uc0 {
    transition: all 0.5s;
}
.base-2v-uc0:hover {
    transition: all 0s;
    transform: scale(1.02);
}

/* Messages Slide In Chat */
@keyframes slide-up {
    0% {
        opacity: 0;
        transform: translateX(20px);
    }
    100% {
        opacity: 1;
        transform: translateX(0px);
    }
}
.message-2CShn3 {
  animation: slide-up 0.4s ease;
}

/* Better Jump To Present Button */
[class*="jumpToPresentBar"] {
    display: contents;
}
[class*="jumpToPresentBar"] > button:first-child {
    display: none;
}
[class*="jumpToPresentBar"] > button:last-child {
    position: absolute;
    z-index: 1;
    bottom: 24px;
    right: 22px;
    padding: 8px !important;
    height: auto;
    background-color: #5865F2;
    box-shadow: var(--elevation-high);
    border-radius: 100px;
    display: flex;
    font-size: 0px;
    color: transparent;
    transition: font-size .2s .1s, color .2s, padding .4s .1s;
}
[class*="jumpToPresentBar"] > button svg {
    order: -1;
    margin: 0px;
    height: 24px;
    width: 24px;
    top: auto;
    margin-right: 0px;
    margin-left: 0px;
    color: #FFFFFF;
    transition: margin .6s;
}
[class*="jumpToPresentBar"]:hover > button {
    padding: 8px 18px !important;
    font-size: 14px;
    color: #FFFFFF;
    transition: font-size .2s, color .2s .1s, padding .4s;
}
[class*="jumpToPresentBar"]:hover > button svg {
    margin-right: 2px;
    margin-left: -6px;
}

/* Animated Button Icons */	
.winButtonMinMax-3RsPUg[aria-label="Minimize"]:hover {
    transform: rotate(45deg)!important;
}
.winButtonMinMax-3RsPUg[aria-label="Maximize"]:hover {
    transform: rotate(45deg)!important;
}
.winButton-3UMjdg:nth-child(2):hover {
    transform: rotate(45deg)!important;
}
.winButton-3UMjdg {
    transition: all 200ms ease-out!important;
    border-radius: 30px!important;
}
.closeButton-PCZcma:hover {
	transform: rotate(45deg)!important;
	transition: all 200ms ease-out!important;
}

/* settings/deafen/mute buttons animated */
.button-12Fmur:hover .contents-3ca1mk {animation: UserModalButtons 0.5s normal ease;}
  .container-YkUktl .noWrap-hBpHBz {width: 100px; opacity: 1;}
  .button-12Fmur {transition: 0.2s;}
  .button-12Fmur:hover {padding-bottom: 0px; transition: 0.2;}
  @keyframes UserModalButtons {
    0% {
      transform: translateY(0px);
    }
    50% {
      transform: translateY(-5px);
    }
    100% {
      transform: translateY(0px);
    }
  }

/* Pop-out Animation */
.menu-1QACrS, .emojiPicker-6YCk8a, .browser-mnQ1T7, .messagesPopoutWrap-3zryHW, .wrapper-1NB3WY, .container-3u7RcY, .container-2o3qEW, .container-2ebMPP, .userPopout-2j1gM4 {
    animation: custom-menu-animation 250ms ease;
    transform-origin: top;
}
@keyframes custom-menu-animation {
    0% {
        transform: scaleY(0);
    }
    100% {
        transform: scaleY(1);
    }
}

/* WideScreen Settings */
.sidebarRegion-1VBisG, .sidebarRegionScroller-FXiQOh {
    justify-content: unset;
    flex: unset
}
.contentColumn-1C7as6, .customColumn-2n-oKU, .hero-1aNo0v {
    max-width: unset;
}
.accountProfileCard-lbN7n- {
    max-width: 750px;
}
.notificationSettings-1U0JsJ {
    max-width: 45%;
}

/* Animated Home Icon */
.homeIcon-r0w4ny path { fill: transparent }
.homeIcon-r0w4ny {
background: url(https://i.imgur.com/g3xnrIw.gif) center/cover no-repeat; /* change the link with your own */
min-width: 48px;
min-height: 48px;
}

/*Embeds*/
:root {
    --embed-border-radius: 8px;
}
.embed-hKpSrO {
    border-radius: var(--embed-border-radius);
}
.embed-hKpSrO code {
    background: var(--background-secondary);
}
:root {
    --embed-line-width: 256px;
}
.embedFull-1HGV2S {
    border-left: calc(4px + var(--embed-line-width)) solid var(--background-accent);
    background: var(--background-secondary);
}
.grid-1aWVsE {
    margin-left: calc( -1 * var(--embed-line-width));
    z-index: 1;
}
.embedFull-1HGV2S:after, .embedFull-1HGV2S:before {
    content: "";
    height: 100%;
    width: var(--embed-line-width);
    position: absolute;
    top: 0;
    left: calc(-1 * var(--embed-line-width));
}
.embedFull-1HGV2S:after {
    background: linear-gradient(to right, transparent, var(--background-secondary));
}
.embedFull-1HGV2S:before {
    background: var(--background-secondary);
    opacity: .8;
}

/* Emoji Fix */
img.emote {
    text-indent: 0;
    white-space: nowrap;
    width: auto;
    position: relative;
    top: 0.25ex;
}