Mastodon Modern by freeplay

/*** 


	!!! MAKE SURE TO ADD YOUR INSTANCE URL TO THE LIST BELOW !!!


***/
@-moz-document domain("mastodon.coffee"), domain("mstdn.social"), domain("mastodon.art"), domain("mastodon.social"), domain("mastodon.online"), domain("mastodon.lol") {

/* Update 1.2.1
- Mobile fixes
*/

/* ==UserStyle==
@name           Mastodon Modern
@version        1.2.1
@description    Gives Mastodon a nicer look :)
@updateURL      https://codeberg.org/Freeplay/UserStyles/raw/branch/main/mastodon/modern.user.css
@preprocessor   stylus

 -- AUTHOR STUFF --
@namespace      Freeplay
@author         Freeplay (https://freeplay.codeberg.page/)
@homepageURL    https://codeberg.org/Freeplay/UserStyles
@supportURL     https://codeberg.org/Freeplay/UserStyles/issues
==/UserStyle== */

    /* Insert code here... */
#mastodon, .public-layout { // Wrapped in this so it doesn't mess with other front ends the instance probably has
	responsiveW1 = 1320px
	responsiveW2 = 1191px
	mobileW = 895px
	
	transBounce1 = .2s cubic-bezier(0,0,0,1.1)
	
	media = ".media-gallery, .video-player, .status-card.horizontal.interactive, .status-card, .audio-player"
	
	/:root {
		--tl-width 750px
		--radius 12px
		// --radius 0px
		--radius-round 24px
		--hover-color rgba(170,170,170, 0.07)
		--border-color rgba(120,120,120, 0.2)
		--shadow 0 10px 40px -10px rgba(0,0,0,0.15)
		--shadow-low 0 8px 16px -10px rgba(0,0,0,0.4)
		--shadow-med 0 8px 60px -30px rgba(0,0,0,0.1)
		--status-left-padding 75px
	}
	
	/.rtl {
		textarea, p {
			text-align right
			direction rtl
		}
	}
	
	.button--block {
		font-weight 700
	}
	.compose-form__upload-thumbnail,
	button:not(.column-header__button), video, input, iframe, .privacy-dropdown__dropdown, .react-toggle-track,
 	.reply-indicator, .compose-form__warning {
		border-radius var(--radius) !important
	}
	button, .focusable, a, .media-gallery__item-thumbnail {
		&:focus-visible {
			box-shadow inset 0 0 0 2px #dc7b18
			outline 2px #dc7b18 solid
			outline-offset -2px
		}
	}
	* {
		border-color var(--border-color) !important
		font-display swap !important
	}
	.media-gallery__item, .column-link, select, .status-card, .audio-player {
		transition transform .4s cubic-bezier(0,0,0,3) !important
		&:active {
			transform scale(.99)
			transition transform .4s cubic-bezier(0,0,0,1) !important
		}
	}
	.react-toggle-track, .button, .icon-button, .floating-action-button {
		transition transform .4s cubic-bezier(0,0,0,4) !important
		&:active {
			transform scale(.95)
			transition transform .4s cubic-bezier(0,0,0,1) !important
		}
	}
	.status__content__spoiler-link {
		span {
			display inline-block
			transition transform .4s cubic-bezier(0,0,0,4) !important
		}
		
		&:active span {
			transition transform .4s cubic-bezier(0,0,0,1) !important
			transform translateY(1px)
		}
	}
	.react-toggle-thumb {
		pointer-events: none
	}
	.account__avatar, #profile_page_avatar {
		border-radius 30% !important
	}
	
	.detailed-status__action-bar,
	.column-header__collapsible-inner,
	.compose-form__buttons-wrapper,
	.audio-player, .box-widget input[type="email"], .box-widget input[type="password"], .box-widget input[type="text"], .box-widget textarea, .compose-form .spoiler-input__input, .compose-form__autosuggest-wrapper, .compose-form__poll-wrapper select, .poll__option input[type="text"], .report-dialog-modal__textarea, .search__input, .setting-text, .statuses-grid .detailed-status {
		border 0 !important
	}
	
	.columns-area__panels__pane__inner {
		margin-top 30px
	}
	.compose-panel {
		margin-top 0
	}
	.search {
		&, /.search-popout {
			margin-inline 5px
			border-radius var(--radius)
		}
		label {
			// padding-inline 20px
			box-sizing border-box
		}
		input {
			border-radius var(--radius-round) !important
			padding-inline-start 20px !important
			padding-inline-end 40px !important
		}
		.search__icon > i {
			// right 15px
			margin-inline 5px
		}
	}
	.compose-form {
		.reply-indicator {
			&__display-name {
				padding 0
			}
		}
		.compose-form__autosuggest-wrapper, .autosuggest-textarea__textarea { 
			border-radius var(--radius) var(--radius) 0 0 !important
		}
		.compose-form__buttons-wrapper {
			border-radius 0 0 var(--radius) var(--radius) !important
		}
		
		.compose-form__autosuggest-wrapper,
 		.compose-form__buttons-wrapper {
			// background rgba(255,255,255,.1) !important
		}
		textarea, .compose-form__modifiers {
			// background none !important
		}
		.icon-button.inverted, .text-icon-button, .character-counter, textarea {
			// filter saturate(0) invert()
			
		}
		.compose-form__publish-button-wrapper {
			overflow visible !important
		}
	}
	@media (min-width: mobileW) {
		/.layout-single-column .getting-started__footer {
			opacity .5
			transition opacity .4s
			a {
				text-decoration none
			}
			> p {
				font-size 0
				line-height 0
				opacity 0
				transition font-size .2s, line-height .3s cubic-bezier(1, 0, 0, 0)
				transition-duration .2s
			}
			&:hover, &:focus-within {
				opacity 1
				> p {
					font-size 1em
					line-height 1.5
					opacity 1
					transform translateY(0px)
					transition font-size .1s, line-height .3s cubic-bezier(0.8, 0, 0, 1.2), opacity .2s .1s
				}
			}
		}
	}
	
	.columns-area__panels__main {
		margin 0 10px
		@media (min-width: responsiveW1) {
			max-width var(--tl-width) !important
			padding 0 15px
		}
		padding-top 30px !important
		overflow visible !important
		transition max-width transBounce1, margin transBounce1
		> div {
			border-radius var(--radius)
			&:last-child {
				box-shadow var(--shadow-med)
			}
		}
		.scrollable {
			padding-bottom 40vh !important
		}
	}
	.scrollable,
	.column-back-button, .column-header {
		border 0
		border-radius var(--radius)
	}
	.scrollable:not(.scrollable--flex), .activity-stream {
		&:not(.activity-stream) {
			padding 10px
		}
		
		border 0 !important
		contain unset !important
		> [tabindex]:first-child > .focusable {
			margin-top 0
		}
		> div > [tabindex]:last-child {
			.status {
				border 0
			}
		}
	}
	.column, .columns-area {
		overflow visible !important
	}

	// ACCOUNT PAGE
	
	
	
	.scrollable--flex .account-timeline__header {
		margin 0 !important
	}
	.item-list {
		background-color inherit
		border-radius var(--radius)
	}
	.account-timeline__header {
		margin -10px
		margin-bottom 10px
		background-color inherit
		border-radius var(--radius)
		.account__moved-note {
			box-sizing border-box
			border-radius var(--radius)
			margin-bottom calc(0px - var(--radius))
			// margin-bottom -30px
			padding 30px
			padding-bottom calc(var(--radius) + 30px)
			background inherit
			.detailed-status__display-name {
				overflow visible !important
			}
		}
		.account__header {
			overflow visible !important
		}
		.account__header__info {
			z-index 2
		}
		.account__header__image {
			height 0
			padding-bottom 35%
			position sticky
			top calc(0px - var(--radius)) 
			border-radius var(--radius) var(--radius) 0 0
			img {
				position absolute
			}
		}
		.account__header__bar {
			padding 10px
			border 0
			border-radius var(--radius) var(--radius) 0 0
			margin-top calc(0px - var(--radius)) !important
		}
		.account__header__tabs__name {
			h1 {
				display flex
				flex-wrap wrap
				span {
					margin-right .4em
				}
			}
		}
		.account-role {
			margin-right .4em
			> span {
				margin 0 !important
			}
		}
		.account__header__bio {
			margin 0
			margin-top 10px
			> div {
				padding-inline 10px !important
			}
		}
		
	}
	.account__header__fields, .account__header__account-note {
		display flex
		flex-wrap wrap
		align-items center
		border 0
		gap 10px
		/ .public-account-bio .account__header__fields {
			padding 20px !important
			padding-bottom 0 !important
		}
		dl, &.account__header__account-note.account__header__account-note {
			border 0
			border-radius var(--radius-round)
			overflow hidden
			background-color var(--border-color)
			padding 0 !important
			dt, dd {
				width unset
				padding-block .5em
			}
			dt {
				background none
			}
			dd {
				border 0
				&:not(.verified) {
					padding-inline-start 0
				}
			}
		}
		&.account__header__account-note {
			margin 10px
			margin-bottom 0
			gap 0
			background none !important
			border 1px solid var(--border-color) !important
		}
		textarea {
			width 0
			flex-grow 1
			margin 0 !important
			border-radius 0
		}
		label {
			margin 0
			font-weight 600
			padding-inline 14px
		}
	}
	&#mastodon .account__section-headline {
		background none
		/.with-modals & {
			border 0 !important
		}
		a, button {
			background none
			border-radius 0 !important
			span {
				font-weight 400
			}
			&.active span {
				font-weight 700
			}
		}
	}
	.notification__filter-bar {
		border 0 !important
		margin-bottom calc(0px - var(--radius))
		padding-bottom var(--radius)
	}
	
	
	// STATUSES
	.focusable, .entry, .statuses-grid__item .detailed-status {
		overflow clip
		border-radius var(--radius) !important
		transition background .2s, box-shadow .4s, margin .2s, border .2s
		animation slideUp .4s forwards cubic-bezier(0,1,1,1)
		position relative
		&.focusable {
			background none
		}
		&.entry {
			margin-bottom 10px
			.status {
				border 0 !important
			}
		}
		&:not(.detailed-status__wrapper) {
			&::after {
				content ""
				position absolute
				bottom 0px
				left var(--radius)
				right var(--radius)
				border-top 1px solid var(--border-color)

			}
			&::before {
				content ""
				position absolute
				z-index -1
				inset 0
				bottom 1px
				pointer-events none
				transition background-color .2s
			}
			&:hover, &:focus-within {
				// background-color var(--hover-color) !important
				&::before {
					background-color var(--hover-color)
				}
			}
		}
	}
	
	
	.status {
		// border 0
		overflow visible !important
		// border 0 !important
		padding 15px !important
		padding-inline-start var(--status-left-padding) !important
	}
	.status__prepend, .notification__message {
		padding-top 15px !important
		padding-bottom 0 !important
		margin-inline-start var(--status-left-padding)
		margin-bottom -10px !important
		z-index 2
	}
	.account__avatar-overlay-base {
		width 100%
		height 100%
		background-size cover
		border-radius var(--radius)
	}
	.account__avatar-overlay-overlay {
		border-radius var(--radius-round)
		bottom -10%
		right -10%
	}
	.status__info {
		margin-top 5px
		.status__avatar {
			top 15px
			left 15px !important
			right 15px
			z-index 2
		}
		.display-name {
			
			strong {
				font-weight 600
			}
		}
	}
	.status__content {
		min-height 1.4em
		padding-top 2px
		margin-inline -100px
		padding-inline 100px
		text-align unset !important
		&.status__content--with-spoiler > p:first-child {
			margin-bottom 0
		}
		/.rtl & {
			text-align right !important
		}
	}
	.status__content__spoiler-link {
		display block
		width unset
		padding 1em
		color inherit
		font-weight 700
		background none
		margin-inline-start -100px !important
		padding-inline-start 100px !important
		width calc(100% + 150px)
		text-align unset
		font-size .8em
		&:hover, &:focus {
			background-color var(--hover-color)
		}
	}
	{media} {
		margin-inline-start calc(15px - var(--status-left-padding))
		width unset !important
		box-shadow var(--shadow-low)
		border-radius var(--radius)
		margin-block 15px !important
		animation scaleIn .4s
		max-width unset !important
		max-height 80vh !important
		direction unset
		&.status-card {
			box-shadow var(--shadow)
			box-shadow none
			// border 0
			.status-card__content {
				padding-inline 12px
			}
			&:hover {
				background-color var(--hover-color)
			}
		}
	}
	.media-gallery__item:not([style*="50%"]) {
		border-radius var(--radius)
	}
	.detailed-status {
		padding 15px !important
		padding-bottom 5px !important
	}
	.detailed-status__wrapper, .detailed-status, .picture-in-picture {
		&.detailed-status__wrapper {
			margin-block 15px
		}
		box-shadow var(--shadow)
		&:first-child {
			// margin-top 0
		}
		{media} {
			margin-inline 0 !important
			max-height unset !important
		}
		.status__content {
			min-height unset !important
		}
	}
	.picture-in-picture {
		.picture-in-picture__header {
			border-radius var(--radius) var(--radius) 0 0
		}
		{media} {
			margin 0 !important
			border-radius 0 !important
		}
		.picture-in-picture__footer {
			border-radius 0 0 var(--radius) var(--radius)
		}
	}
	
	.status__action-bar, .detailed-status__action-bar, .picture-in-picture__footer {
		// padding-top 0
		.icon-button {
			display inline-flex
			align-items center
			width unset !important
			padding .3em .5em !important
			height unset !important
			flex 0 1 auto !important
			min-width 0
			border-radius var(--radius)
			&:last-child {
				margin 0 !important
			}
			&[aria-label]::after {
				content attr(aria-label)
				font-size .7em
				margin-inline-start .5em
				white-space nowrap
				overflow hidden
				text-overflow ellipsis
			}
		}
		.status__action-bar-dropdown, .detailed-status__action-bar-dropdown, .detailed-status__button {
			display contents
		}
		&.detailed-status__action-bar, &.picture-in-picture__footer {
			padding-right 15px !important
			padding-left 15px !important
			.icon-button {
				flex-grow 1 !important
				// width 0 !important
				justify-content center
			}
		}
		&.picture-in-picture__footer {
			.icon-button::after {
				content unset !important
			}
		}
	}
	
	
	
	.tabs-bar__wrapper, .column-back-button--slim .column-back-button {
		/.column-header {
			font-weight 600
			&, button {
				// border-radius 0 !important
				border-bottom-left-radius 0 !important
				border-bottom-right-radius 0 !important
			}
			& ~ .scrollable {
				border-top-left-radius 0 !important
				border-top-right-radius 0 !important
			}
		}
		@media (min-width: responsiveW2) {
			position fixed
			width 285px
			margin-inline-start 600px
			top 0 !important
			left unset !important
			right unset !important
			min-height 48px !important
			@media (min-width: responsiveW1) {
				margin-inline-start calc(var(--tl-width) - 5px)
			}
			&:not(.column-back-button) {
				padding-top 0
			}
			margin-top 30px
			overflow clip
			border-radius var(--radius) var(--radius) !important
			box-shadow 0 12px 12px -12px rgba(0,0,0,0.1)
			.column-header, .column-header__buttons button {
				background none !important
			}			
			
			.announcements {
				flex-direction column-reverse
				align-items flex-start
			}
			.announcements__container {
				width 100% !important
				.react-swipeable-view-container {
					// height unset !important
				}
			}
			.announcements__mastodon {
				margin-inline-start 10px
				z-index -1
				position relative
			}
		}
		@media (min-width: mobileW) and (max-width: responsiveW2) {
			&.column-back-button {
				border-radius 0 !important
			}
			&:not(.column-back-button) {
				padding-top 0
				.tabs-bar {
					margin-bottom 0
					border 0 !important
				}
				#tabs-bar__portal {
					border-radius 0 !important
					.column-header, button {
						border-radius 0 !important
					}
				}

				& ~ .columns-area .scrollable {
					border-radius 0 !important
				}
				/ #mastodon .columns-area__panels__main {
					&, .columns-area {
						padding-top 0 !important
					}

					> div, .scrollable {
						border-radius 0 !important
					}
				}
			}
		}
		transition margin transBounce1
	}
	
	
	.navigation-panel {
		// padding 10px
		padding-top 50px
		padding-bottom 20px
		// margin-top 46px
		height calc(100% - 30px)
		box-sizing border-box
	}
	.column-link {
		flex-grow 2 !important
		display flex !important
		align-items center !important
		align-content center
		max-height 3.3em
		min-height 2.7em !important
		padding-block 0
		position relative
		box-sizing border-box
		// font-weight 550
		opacity .9
		.column-link__icon, /.column-header__icon {
			margin-inline-end 1em !important
		}
		&::before {
			content: "" !important;
			position absolute
			border-radius: 100px !important;
			width unset !important
			height unset !important
			inset 0px 0px !important
			// min-height 43px
			opacity 0 !important
			background-color rgba(150,150,150,0.1)
			transition opacity .2s
		}
		&.active {
			opacity 1 !important
			font-weight 600
		}
		&:hover, &:focus {
			&:before {
				opacity 1 !important
			}
		}
	}
	.getting-started__trends {
		.trends__item__current {
			display none
		}
		.trends__item__sparkline { 
			path:first-child {
				display none
			}
			path:last-child {
				mask linear-gradient(to left, black, black, transparent)
				
			}
		}
	}
	
	
	
		.getting-started {
			padding 5px 10px
			// margin-top auto
			border 0
			// background none
			display flex
			flex-direction column
			flex-grow 1
			// overflow visible !important
			
			.flex-spacer {
				display none
			}
			.getting-started__wrapper { 
				background none
				height unset !important
				display flex
				flex-direction column
				// flex-grow 1
				justify-content flex-end
				// align-items center
				// max-height 10em
				> * {
					// width 100%
					box-sizing border-box
				}
				.navigation-bar {
					flex-grow 1
					// max-height 6em
					display flex
					flex-direction column
					align-items flex-start
					justify-content flex-end
					padding 0
					margin 20px
					margin-bottom 5px
					position relative
					// display contents
					> * {
						flex-grow 0
					}
					> a {
						// display contents
						flex-grow 1
						max-height 126px
						margin-bottom 10px
					}
				}
				.navigation-bar__profile {
					font-size 1.2em
					line-height 1.4
					margin 10px 0
					
					.permalink {
						font-size 1.2em
					}
				}
				.navigation-bar__actions {
					// margin-bottom 20px
					position absolute
					// inset unset
					right 0
					bottom 10px
					// min-height 4em
					width auto !important
					.icon-button {
						width auto !important
						height auto !important
						padding 20px
						i {
							font-size 20px
						}
					}
				}
				.account__avatar {
					// position static
					width 126px !important
					min-height 100%
					flex-grow 1
					// height 126px !important
					background-size contain !important
					background-position left
					/.rtl & {
						background-position right !important
					}
					border-radius 0 !important
					// &::before {
					// 	content ""
					// 	background-image inherit
					// 	background-size cover
					// 	background-position center
					// 	position absolute
					// 	inset -200%
					// 	border-radius 100%
					// 	z-index -1
					// 	filter blur(100px)
					// 	opacity .1
					// }
					&::before {
						content ""
						background-image inherit
						position absolute
						background-size cover
						background-position center
						height calc(100% + 100px)
						width 200%
						// width 400%
						border-bottom-right-radius 100%
						// z-index -1
						transform translate(-40%, -20%)
						filter blur(100px)
						opacity .2
						/.rtl & {
							transform translate(40%, -20%)
						}
					}
				}
				> * {
					border 0 !important
					padding 20px
					background none
				}
			}
			.getting-started__footer {
				padding-inline 20px
				a span {
					font-size 1.1em !important
					line-height 2
				}
			}
		}
	
	// Public layout
	&.public-layout {
		.container:nth-child(2) > .grid .column-1 {
			position sticky
			align-self flex-end
			bottom 0
			min-height calc(100vh - 80px)
			> * {
				border-radius var(--radius)
				overflow hidden
				border 0 !important
			}
			a, .hero-widget__text {
				border 0 !important
			}
		}
		
		@media (min-width 416px) {
			.grid, .grid-4 {
				gap 15px
			}
			.header {
				border-radius var(--radius)
				// margin-top 20px
				// margin-bottom 15px
				margin 15px 0
			}
			.public-account-header {
				border-radius var(--radius)
				--border-color transparent !important
				border 0 !important
				&:not(.public-account-header--no-bar) {
					margin-bottom 15px
				}

				.public-account-header__bar::before {
					border 0
				}
			}
			.account__section-headline {
				border-radius var(--radius) var(--radius) 0 0
				border 0
				// margin-bottom calc(0px - var(--radius))
				// padding-bottom var(--radius)
				& + .activity-stream > .entry:first-child {
					border-radius 0 !important
				}
			}
			.table-of-contents {
				max-height calc(100vh - 20px)
				min-height unset !important
				overflow-y scroll !important
				display flex
				flex-direction column
				position sticky
				top 10px
			}
		} 
		@media (max-width 416px) {
			.contact-widget {
				padding 0 10px
			}
			.grid-4 > div:not(.column-4) {
				position relative
				z-index 2
			}
			.table-of-contents {
				// margin calc(0px - var(--radius) * 2) 0
				max-height 70vh
				// min-height max-content !important
				max-content min-content
				display flex
				flex-direction column
				flex-wrap wrap
				// padding calc(30px + var(--radius)) 20px
				padding 30px
				box-sizing border-box
				overflow-x scroll !important
				scroll-snap-type x mandatory
				scroll-padding-inline-start 30px
				gap 20px 30px
				position relative
				background none !important
				border 0 !important
				scroll-behavior smooth
				> li {
					width 70%
					max-height 80%
					overflow-y auto
					// margin-right 20px
					// margin-bottom 20px
					// background-color var(--hover-color)
					border 1px solid var(--border-color)
					border-radius var(--radius)
					scroll-snap-align start
					box-shadow var(--shadow)
					transition background-color .2s, box-shadow .2s
					&:hover, &:focus-within {
						background-color var(--hover-color)	
					}
					ul {
						border 0 !important
					}
					> a {
						border 0 !important
					}
					&:last-child {
						margin-inline-end 70%
					}
				}
			}
		}
		// Login & About page
		.account-card, .card > a,
		.page-header, .statuses-grid__item,
		.box-widget, .directory__tag > a, .hero-widget,
		.landing-page__call-to-action, .table-of-contents, .rules-list {
			border-radius var(--radius)
			overflow hidden
		}
		
		.account-card__header {
			padding 0 !important
			padding-bottom 4px !important
		}
		.account-card__bio {
			margin-top 0 !important
		}
		.account-card__actions {
			margin-top auto !important
		}
		
		// Statuses
		.statuses-grid {
			margin auto
		}
		.entry {
			&, & ~ .entry {
				margin 0
				&:not(:last-child):not(:first-child) {
					border-radius 0 !important
				}
				&:not(:first-child:last-child) {
					&:last-child {
						border-top-left-radius 0 !important
						border-top-right-radius 0 !important
					}
					&:first-child {
						border-bottom-left-radius 0 !important
						border-bottom-right-radius 0 !important
					}
				}
			}
			&:last-child:before {
				content unset !important
			}
			&::before, &::after {
				bottom 1px !important
			}
		}
		.status {
			.status__content {
				margin-top 0
			}
		}
		.detailed-status {
			padding 20px !important
			padding-bottom 5px !important
			.status__content {
				margin-top 0
			}
			.detailed-status__meta {
				margin-top 15px
				margin-bottom 10px
			}
		}
		
		// Footer
		.footer {
			// Was just something that annoyed me a lil', now it's even :)
			.column-3, .column-4 {
				text-align right
			}
		}
	}
	
	
	
	
	
	// Mobile
	@media (max-width: mobileW) {
		/:root {
			--status-left-padding 70px
		}
		.columns-area--mobile > .column {
			overflow hidden !important
			> div > div {
				animation fadeUp .4s
			}
		}
		.columns-area--mobile > .column > .column-header__wrapper {
			display none
		}
		.columns-area__panels__main {
			padding 0 !important
			max-width unset
			.scrollable:not(.scrollable--flex) {
				padding 5px !important
				padding-bottom 40vh !important
				&::before {
					content ""
					position absolute
					inset 0
					background-color inherit
					z-index -1
				}
				.account-timeline__header {
					margin -5px !important
				}
			}

			~/ .is-composing .columns-area__panels__main {
				padding-bottom 40px !important
			}
			.scrollable, .account__header__image, > div {
				border-radius 0 !important
			}
		}
		.status__prepend, .notification__message {
			margin-bottom -5px !important
		}

		.status {
			padding-top 14px !important
			.status__avatar {
				left 14px !important
				width 45px !important
				height 45px !important
				background-size 45px !important
				> div {
					width 100% !important
					height 100% !important
					background-size cover !important
				}
			}
			.status__expand {
				// width 50px !important
			}
			{media}  {
				margin-bottom 0 !important
			}
		}
		
		
		.tabs-bar__wrapper {
			// order 2
			// position sticky
			position fixed !important
			top unset !important
			bottom 0 !important
			left 0 !important
			right 0 !important
			display flex
			flex-direction column
			box-shadow none !important
			padding 0
			background none
			border-radius 0 !important
			pointer-events none
			
			> * {
				pointer-events all
			}
			.tabs-bar {
				order 2
				margin 0
				border 0
				// height 60px
				border-radius var(--radius-round) var(--radius-round) 0 0
				// border-top 1px solid var(--border-color)
				color white !important
				overflow visible !important
				padding-inline 5px
				box-shadow 0 0 24px rgba(0,0,0,0.1)
				/.rtl & {
					flex-direction row-reverse
					// The react swiping directions can't be reversed, so I would have to reverse this, instead.
				}
				a {
					flex-grow 1 !important
					flex-basis unset !important
					padding-block 20px
					position relative
					border 0
					background none !important
					transition transform .4s cubic-bezier(0,0,0,4), filter .1s
					> i {
						font-size 18px
						filter opacity(.7)
						.icon-with-badge__badge {
							font-size .5em
							border-radius var(--radius-round)
						}
						transition transform .2s cubic-bezier(0,0,0,1.2)
					}
					&::before {
						content ""
						position absolute
						bottom -10px
						width 5px
						height 10px
						border-radius 100px
						background-color currentColor
						left 50%
						margin-inline-start -2.5px
						transition bottom .2s cubic-bezier(0,0,0,4), width .2s, margin .2s
					}
					&:active {
						transform translateY(5px)
						transition transform 1s
					}
				}
				a.active {
					transform translateY(-2px)
					i {
						// transform scale(1.2) translateY(0px)
						filter none !important
					}
					&::before {
						bottom -6px
						width 10px
						margin-left -5px
					}
				}
			}
			#tabs-bar__portal {
				margin 10px 20px !important
				margin-right auto !important
				width max-content !important
				box-shadow var(--shadow) !important
				max-width calc(100vw - 130px)
				border-radius var(--radius-round) !important
				overflow hidden
				transition transform .2s
				> button {
					padding-inline 20px
				}
				button {
					// min-width 60px
				}
				.column-header > button {
					padding-inline-start 15px
					transform-origin center !important
				}
				.column-header__buttons > button {
					// padding-inline 0 !important
					padding-inline 10px
					transition padding .2s, margin .2s
					&:first-child {
						padding-inline-start 20px
						&.active {
							margin-inline-start 20px
						}
					}
					&:last-child {
						padding-inline-end 20px
					}
					&.active {
						padding-inline 15px
					}
				}
				.column-header {
					transition transform .2s
					&:active {
						transform scale(.98)
					}
				}
				.column-header__collapsible {
					max-width calc(100vw - 40px) !important
					opacity 1 !important
				}
				// .column-header__collapsible {
				// 	transition margin-top .2s cubic-bezier(0,0,0,2)
				// 	overflow-y auto !important
				// 	&:not(.collapsed) {
				// 		// width auto !important
				// 		max-width calc(100vw - 40px)
				// 		// margin-top 5px
				// 	}
				// 	max-width 100%
				// }
			}
			/.floating-action-button {
				bottom 70px
			}
		}
		.icon-button:after {
			content unset !important
		}
		
		.status__action-bar {
			margin-inline-start -78px + 15px
			margin-bottom -10px
			.icon-button {
				flex-grow 1 !important
				margin 0 !important
				justify-content center
				padding .7em !important
			}
		}
		
		// Fix dropdown note preview
		.modal-root__modal .status.light {
			overflow hidden !important
			padding-inline-start 70px !important
		}
		.getting-started {
			padding 20px
			padding-bottom 60px
		}
		.getting-started__wrapper {
			flex-grow 1
			overflow visible !important
		}
		
		.compose-form__autosuggest-wrapper {
			border 1px solid var(--border-color)
		}
		/.layout-single-column #mastodon .drawer__inner {
			.navigation-bar {
				padding 20px
				padding-bottom 10px
			}
			.compose-form {
				padding-bottom 100px !important
			}
			.compose-form__autosuggest-wrapper {
				border-radius var(--radius) !important
				overflow hidden
			}
			.compose-form__modifiers {
				padding-bottom 50px
			}
			.compose-form__publish {
				margin-top -45px
				padding-inline 8px
				.compose-form__publish-button-wrapper {
					padding-top 0
				}
			}
			.compose-form__buttons-wrapper {
				// background none
				position fixed
				bottom 70px
				border-radius var(--radius-round) !important
				left 20px
				right 20px
				padding-block 0
				z-index 2
				button {
					padding 7px
					border-radius 0 !important
				}
			}
			
		}
		
		// .modal-root__container {
		// 	overflow-y auto !important
		// 	display unset
		// 	animation unset
		// 	> .actions-modal {
		// 		width unset
		// 		margin 20px
		// 		margin-bottom 40px
		// 		margin-top calc(100vh - 340px)
		// 		// margin-bottom 50px
		// 		min-height max-content
		// 		max-height unset !important
		// 		border-radius var(--radius)
		// 		max-width unset
		// 		// animation slideUp .7s 0s backwards cubic-bezier(0,1,0,1.1)
		// 		// overflow visible !important
		// 		ul {
		// 			max-height unset !important
		// 			min-height max-content !important
		// 			overflow visible !important
		// 		}
		// 	}
		// }
		
		/.search-popout {
			max-width unset !important
			width calc(100vw - 70px) !important
			position fixed
			left 15px
			
		}
		
	}
	
	// Fix up multi-columns
	/.layout-multiple-columns #mastodon .columns-area {
		overflow auto hidden !important
		.column-header, .scrollable, .column-back-button, .account__header__image {
			border-radius 0 !important	
		}
		.icon-button:after {
			content unset !important
		}
		> div {
			border 0 !important
			padding 0 !important
			&:not(.drawer):not(:last-child) {
				padding-inline-end 2px !important
			}
			&.column {
				flex-grow 1
				max-width 600px
			}
			&:first-child {
				margin-inline-start auto !important
			}
			&:last-child {
				margin-inline-end auto !important
			}
		}
		.drawer {
			padding-inline 10px !important
			padding-top 20px !important
			.drawer__header {
				border-radius var(--radius-round)
				margin-inline 5px
				overflow hidden
				border 0 !important
				a {
					border 0
					&:first-child {
						padding-inline-start 15px !important
					}
					&:last-child {
						padding-inline-end 15px !important
					}
				}
			}
		}
		.drawer__inner:not(.darker), .drawer__inner__mastodon {
			background-color transparent
			border 0 !important
		}
		.drawer__inner.darker {
			border-radius var(--radius) var(--radius) 0 0
			margin-inline 5px
			width calc(100% - 10px)
		}
		
		.getting-started__trends {
			padding 0px 20px
		}
	}
	
	
	/ .modal-root__container {
		animation bounceIn .7s !important
	}
	@media (prefers-reduced-motion: no-preference) {
		@keyframes bounceIn {
			0% { transform: scale(1.1); opacity: 0 }
			30% { transform: scale(.99); opacity: 1 }
			60% { transform: scale(1.005); opacity: 1 }
			100% { transform: scale(1); opacity: 1 }
		}
		
		@keyframes slideUp {
			from { 
				transform translateY(20px) 
			}
		}
		@keyframes slideUpBig {
			from { 
				transform translateY(50vh) 
			}
		}
		@keyframes fadeUp {
			from { 
				transform translateY(10px) 
				opacity 0
			}
		}
		@keyframes scaleIn {
			from {
				transform scale(.98)
				opacity 0
			}
		}
		@keyframes fadeLeft {
			from {
				transform: translateX(20px) opacity(0)
			}
		}
	}
	
	
}
	
}