app/javascript/styles/mastodon/components.scss

   1 .app-body {
   2   -webkit-overflow-scrolling: touch;
   3   -ms-overflow-style: -ms-autohiding-scrollbar;
   4 }
   5
   6 .animated-number {
   7   display: inline-flex;
   8   flex-direction: column;
   9   align-items: stretch;
  10   overflow: hidden;
  11   position: relative;
  12 }
  13
  14 .inline-alert {
  15   color: $valid-value-color;
  16   font-weight: 400;
  17
  18   .no-reduce-motion & {
  19     transition: opacity 200ms ease;
  20   }
  21 }
  22
  23 .link-button {
  24   display: block;
  25   font-size: 15px;
  26   line-height: 20px;
  27   color: $ui-highlight-color;
  28   border: 0;
  29   background: transparent;
  30   padding: 0;
  31   cursor: pointer;
  32
  33   &:hover,
  34   &:active {
  35     text-decoration: underline;
  36   }
  37
  38   &:disabled {
  39     color: $ui-primary-color;
  40     cursor: default;
  41   }
  42 }
  43
  44 .button {
  45   background-color: $ui-highlight-color;
  46   border: 10px none;
  47   border-radius: 4px;
  48   box-sizing: border-box;
  49   color: $primary-text-color;
  50   cursor: pointer;
  51   display: inline-block;
  52   font-family: inherit;
  53   font-size: 14px;
  54   font-weight: 500;
  55   height: 36px;
  56   letter-spacing: 0;
  57   line-height: 36px;
  58   overflow: hidden;
  59   padding: 0 16px;
  60   position: relative;
  61   text-align: center;
  62   text-transform: uppercase;
  63   text-decoration: none;
  64   text-overflow: ellipsis;
  65   transition: all 100ms ease-in;
  66   white-space: nowrap;
  67   width: auto;
  68
  69   &:active,
  70   &:focus,
  71   &:hover {
  72     background-color: lighten($ui-highlight-color, 10%);
  73     transition: all 200ms ease-out;
  74   }
  75
  76   &--destructive {
  77     transition: none;
  78
  79     &:active,
  80     &:focus,
  81     &:hover {
  82       background-color: $error-red;
  83       transition: none;
  84     }
  85   }
  86
  87   &:disabled,
  88   &.disabled {
  89     background-color: $ui-primary-color;
  90     cursor: default;
  91   }
  92
  93   &::-moz-focus-inner {
  94     border: 0;
  95   }
  96
  97   &::-moz-focus-inner,
  98   &:focus,
  99   &:active {
 100     outline: 0 !important;
 101   }
 102
 103   &.button-primary,
 104   &.button-alternative,
 105   &.button-secondary,
 106   &.button-alternative-2 {
 107     font-size: 16px;
 108     line-height: 36px;
 109     height: auto;
 110     text-transform: none;
 111     padding: 4px 16px;
 112   }
 113
 114   &.button-alternative {
 115     color: $inverted-text-color;
 116     background: $ui-primary-color;
 117
 118     &:active,
 119     &:focus,
 120     &:hover {
 121       background-color: lighten($ui-primary-color, 4%);
 122     }
 123   }
 124
 125   &.button-alternative-2 {
 126     background: $ui-base-lighter-color;
 127
 128     &:active,
 129     &:focus,
 130     &:hover {
 131       background-color: lighten($ui-base-lighter-color, 4%);
 132     }
 133   }
 134
 135   &.button-secondary {
 136     color: $darker-text-color;
 137     background: transparent;
 138     padding: 3px 15px;
 139     border: 1px solid $ui-primary-color;
 140
 141     &:active,
 142     &:focus,
 143     &:hover {
 144       border-color: lighten($ui-primary-color, 4%);
 145       color: lighten($darker-text-color, 4%);
 146     }
 147
 148     &:disabled {
 149       opacity: 0.5;
 150     }
 151   }
 152
 153   &.button--block {
 154     display: block;
 155     width: 100%;
 156   }
 157
 158   .layout-multiple-columns &.button--with-bell {
 159     font-size: 12px;
 160     padding: 0 8px;
 161   }
 162 }
 163
 164 .column__wrapper {
 165   display: flex;
 166   flex: 1 1 auto;
 167   position: relative;
 168 }
 169
 170 .icon-button {
 171   display: inline-block;
 172   padding: 0;
 173   color: $action-button-color;
 174   border: 0;
 175   border-radius: 4px;
 176   background: transparent;
 177   cursor: pointer;
 178   transition: all 100ms ease-in;
 179   transition-property: background-color, color;
 180   text-decoration: none;
 181
 182   &:hover,
 183   &:active,
 184   &:focus {
 185     color: lighten($action-button-color, 7%);
 186     background-color: rgba($action-button-color, 0.15);
 187     transition: all 200ms ease-out;
 188     transition-property: background-color, color;
 189   }
 190
 191   &:focus {
 192     background-color: rgba($action-button-color, 0.3);
 193   }
 194
 195   &.disabled {
 196     color: darken($action-button-color, 13%);
 197     background-color: transparent;
 198     cursor: default;
 199   }
 200
 201   &.active {
 202     color: $highlight-text-color;
 203   }
 204
 205   &::-moz-focus-inner {
 206     border: 0;
 207   }
 208
 209   &::-moz-focus-inner,
 210   &:focus,
 211   &:active {
 212     outline: 0 !important;
 213   }
 214
 215   &.inverted {
 216     color: $lighter-text-color;
 217
 218     &:hover,
 219     &:active,
 220     &:focus {
 221       color: darken($lighter-text-color, 7%);
 222       background-color: rgba($lighter-text-color, 0.15);
 223     }
 224
 225     &:focus {
 226       background-color: rgba($lighter-text-color, 0.3);
 227     }
 228
 229     &.disabled {
 230       color: lighten($lighter-text-color, 7%);
 231       background-color: transparent;
 232     }
 233
 234     &.active {
 235       color: $highlight-text-color;
 236
 237       &.disabled {
 238         color: lighten($highlight-text-color, 13%);
 239       }
 240     }
 241   }
 242
 243   &.overlayed {
 244     box-sizing: content-box;
 245     background: rgba($base-overlay-background, 0.6);
 246     color: rgba($primary-text-color, 0.7);
 247     border-radius: 4px;
 248     padding: 2px;
 249
 250     &:hover {
 251       background: rgba($base-overlay-background, 0.9);
 252     }
 253   }
 254
 255   &--with-counter {
 256     display: inline-flex;
 257     align-items: center;
 258     width: auto !important;
 259   }
 260
 261   &__counter {
 262     display: inline-block;
 263     width: 14px;
 264     margin-left: 4px;
 265     font-size: 12px;
 266     font-weight: 500;
 267   }
 268 }
 269
 270 .text-icon-button {
 271   color: $lighter-text-color;
 272   border: 0;
 273   border-radius: 4px;
 274   background: transparent;
 275   cursor: pointer;
 276   font-weight: 600;
 277   font-size: 11px;
 278   padding: 0 3px;
 279   line-height: 27px;
 280   outline: 0;
 281   transition: all 100ms ease-in;
 282   transition-property: background-color, color;
 283
 284   &:hover,
 285   &:active,
 286   &:focus {
 287     color: darken($lighter-text-color, 7%);
 288     background-color: rgba($lighter-text-color, 0.15);
 289     transition: all 200ms ease-out;
 290     transition-property: background-color, color;
 291   }
 292
 293   &:focus {
 294     background-color: rgba($lighter-text-color, 0.3);
 295   }
 296
 297   &.disabled {
 298     color: lighten($lighter-text-color, 20%);
 299     background-color: transparent;
 300     cursor: default;
 301   }
 302
 303   &.active {
 304     color: $highlight-text-color;
 305   }
 306
 307   &::-moz-focus-inner {
 308     border: 0;
 309   }
 310
 311   &::-moz-focus-inner,
 312   &:focus,
 313   &:active {
 314     outline: 0 !important;
 315   }
 316 }
 317
 318 .dropdown-menu {
 319   position: absolute;
 320 }
 321
 322 .invisible {
 323   font-size: 0;
 324   line-height: 0;
 325   display: inline-block;
 326   width: 0;
 327   height: 0;
 328   position: absolute;
 329
 330   img,
 331   svg {
 332     margin: 0 !important;
 333     border: 0 !important;
 334     padding: 0 !important;
 335     width: 0 !important;
 336     height: 0 !important;
 337   }
 338 }
 339
 340 .ellipsis {
 341   &::after {
 342     content: "…";
 343   }
 344 }
 345
 346 .compose-form {
 347   padding: 10px;
 348
 349   &__sensitive-button {
 350     padding: 10px;
 351     padding-top: 0;
 352
 353     font-size: 14px;
 354     font-weight: 500;
 355
 356     &.active {
 357       color: $highlight-text-color;
 358     }
 359
 360     input[type=checkbox] {
 361       display: none;
 362     }
 363
 364     .checkbox {
 365       display: inline-block;
 366       position: relative;
 367       border: 1px solid $ui-primary-color;
 368       box-sizing: border-box;
 369       width: 18px;
 370       height: 18px;
 371       flex: 0 0 auto;
 372       margin-right: 10px;
 373       top: -1px;
 374       border-radius: 4px;
 375       vertical-align: middle;
 376
 377       &.active {
 378         border-color: $highlight-text-color;
 379         background: $highlight-text-color;
 380       }
 381     }
 382   }
 383
 384   .compose-form__warning {
 385     color: $inverted-text-color;
 386     margin-bottom: 10px;
 387     background: $ui-primary-color;
 388     box-shadow: 0 2px 6px rgba($base-shadow-color, 0.3);
 389     padding: 8px 10px;
 390     border-radius: 4px;
 391     font-size: 13px;
 392     font-weight: 400;
 393
 394     strong {
 395       color: $inverted-text-color;
 396       font-weight: 500;
 397
 398       @each $lang in $cjk-langs {
 399         &:lang(#{$lang}) {
 400           font-weight: 700;
 401         }
 402       }
 403     }
 404
 405     a {
 406       color: $lighter-text-color;
 407       font-weight: 500;
 408       text-decoration: underline;
 409
 410       &:hover,
 411       &:active,
 412       &:focus {
 413         text-decoration: none;
 414       }
 415     }
 416   }
 417
 418   .emoji-picker-dropdown {
 419     position: absolute;
 420     top: 0;
 421     right: 0;
 422   }
 423
 424   .compose-form__autosuggest-wrapper {
 425     position: relative;
 426   }
 427
 428   .autosuggest-textarea,
 429   .autosuggest-input,
 430   .spoiler-input {
 431     position: relative;
 432     width: 100%;
 433   }
 434
 435   .spoiler-input {
 436     height: 0;
 437     transform-origin: bottom;
 438     opacity: 0;
 439
 440     &.spoiler-input--visible {
 441       height: 36px;
 442       margin-bottom: 11px;
 443       opacity: 1;
 444     }
 445   }
 446
 447   .autosuggest-textarea__textarea,
 448   .spoiler-input__input {
 449     display: block;
 450     box-sizing: border-box;
 451     width: 100%;
 452     margin: 0;
 453     color: $inverted-text-color;
 454     background: $simple-background-color;
 455     padding: 10px;
 456     font-family: inherit;
 457     font-size: 14px;
 458     resize: vertical;
 459     border: 0;
 460     outline: 0;
 461
 462     &::placeholder {
 463       color: $dark-text-color;
 464     }
 465
 466     &:focus {
 467       outline: 0;
 468     }
 469
 470     @media screen and (max-width: 600px) {
 471       font-size: 16px;
 472     }
 473   }
 474
 475   .spoiler-input__input {
 476     border-radius: 4px;
 477   }
 478
 479   .autosuggest-textarea__textarea {
 480     min-height: 100px;
 481     border-radius: 4px 4px 0 0;
 482     padding-bottom: 0;
 483     padding-right: 10px + 22px;
 484     resize: none;
 485     scrollbar-color: initial;
 486
 487     &::-webkit-scrollbar {
 488       all: unset;
 489     }
 490
 491     @media screen and (max-width: 600px) {
 492       height: 100px !important; // prevent auto-resize textarea
 493       resize: vertical;
 494     }
 495   }
 496
 497   .autosuggest-textarea__suggestions-wrapper {
 498     position: relative;
 499     height: 0;
 500   }
 501
 502   .autosuggest-textarea__suggestions {
 503     box-sizing: border-box;
 504     display: none;
 505     position: absolute;
 506     top: 100%;
 507     width: 100%;
 508     z-index: 99;
 509     box-shadow: 4px 4px 6px rgba($base-shadow-color, 0.4);
 510     background: $ui-secondary-color;
 511     border-radius: 0 0 4px 4px;
 512     color: $inverted-text-color;
 513     font-size: 14px;
 514     padding: 6px;
 515
 516     &.autosuggest-textarea__suggestions--visible {
 517       display: block;
 518     }
 519   }
 520
 521   .autosuggest-textarea__suggestions__item {
 522     padding: 10px;
 523     cursor: pointer;
 524     border-radius: 4px;
 525
 526     &:hover,
 527     &:focus,
 528     &:active,
 529     &.selected {
 530       background: darken($ui-secondary-color, 10%);
 531     }
 532   }
 533
 534   .autosuggest-account,
 535   .autosuggest-emoji,
 536   .autosuggest-hashtag {
 537     display: flex;
 538     flex-direction: row;
 539     align-items: center;
 540     justify-content: flex-start;
 541     line-height: 18px;
 542     font-size: 14px;
 543   }
 544
 545   .autosuggest-hashtag {
 546     justify-content: space-between;
 547
 548     &__name {
 549       flex: 1 1 auto;
 550       overflow: hidden;
 551       text-overflow: ellipsis;
 552       white-space: nowrap;
 553     }
 554
 555     strong {
 556       font-weight: 500;
 557     }
 558
 559     &__uses {
 560       flex: 0 0 auto;
 561       text-align: right;
 562       overflow: hidden;
 563       text-overflow: ellipsis;
 564       white-space: nowrap;
 565     }
 566   }
 567
 568   .autosuggest-account-icon,
 569   .autosuggest-emoji img {
 570     display: block;
 571     margin-right: 8px;
 572     width: 16px;
 573     height: 16px;
 574   }
 575
 576   .autosuggest-account .display-name__account {
 577     color: $lighter-text-color;
 578   }
 579
 580   .compose-form__modifiers {
 581     color: $inverted-text-color;
 582     font-family: inherit;
 583     font-size: 14px;
 584     background: $simple-background-color;
 585
 586     .compose-form__upload-wrapper {
 587       overflow: hidden;
 588     }
 589
 590     .compose-form__uploads-wrapper {
 591       display: flex;
 592       flex-direction: row;
 593       padding: 5px;
 594       flex-wrap: wrap;
 595     }
 596
 597     .compose-form__upload {
 598       flex: 1 1 0;
 599       min-width: 40%;
 600       margin: 5px;
 601
 602       &__actions {
 603         background: linear-gradient(180deg, rgba($base-shadow-color, 0.8) 0, rgba($base-shadow-color, 0.35) 80%, transparent);
 604         display: flex;
 605         align-items: flex-start;
 606         justify-content: space-between;
 607         opacity: 0;
 608         transition: opacity .1s ease;
 609
 610         .icon-button {
 611           flex: 0 1 auto;
 612           color: $secondary-text-color;
 613           font-size: 14px;
 614           font-weight: 500;
 615           padding: 10px;
 616           font-family: inherit;
 617
 618           &:hover,
 619           &:focus,
 620           &:active {
 621             color: lighten($secondary-text-color, 7%);
 622           }
 623         }
 624
 625         &.active {
 626           opacity: 1;
 627         }
 628       }
 629
 630       &-description {
 631         position: absolute;
 632         z-index: 2;
 633         bottom: 0;
 634         left: 0;
 635         right: 0;
 636         box-sizing: border-box;
 637         background: linear-gradient(0deg, rgba($base-shadow-color, 0.8) 0, rgba($base-shadow-color, 0.35) 80%, transparent);
 638         padding: 10px;
 639         opacity: 0;
 640         transition: opacity .1s ease;
 641
 642         textarea {
 643           background: transparent;
 644           color: $secondary-text-color;
 645           border: 0;
 646           padding: 0;
 647           margin: 0;
 648           width: 100%;
 649           font-family: inherit;
 650           font-size: 14px;
 651           font-weight: 500;
 652
 653           &:focus {
 654             color: $white;
 655           }
 656
 657           &::placeholder {
 658             opacity: 0.75;
 659             color: $secondary-text-color;
 660           }
 661         }
 662
 663         &.active {
 664           opacity: 1;
 665         }
 666       }
 667     }
 668
 669     .compose-form__upload-thumbnail {
 670       border-radius: 4px;
 671       background-color: $base-shadow-color;
 672       background-position: center;
 673       background-size: cover;
 674       background-repeat: no-repeat;
 675       height: 140px;
 676       width: 100%;
 677       overflow: hidden;
 678     }
 679   }
 680
 681   .compose-form__buttons-wrapper {
 682     padding: 10px;
 683     background: darken($simple-background-color, 8%);
 684     border-radius: 0 0 4px 4px;
 685     display: flex;
 686     justify-content: space-between;
 687     flex: 0 0 auto;
 688
 689     .compose-form__buttons {
 690       display: flex;
 691
 692       .compose-form__upload-button-icon {
 693         line-height: 27px;
 694       }
 695
 696       .compose-form__sensitive-button {
 697         display: none;
 698
 699         &.compose-form__sensitive-button--visible {
 700           display: block;
 701         }
 702
 703         .compose-form__sensitive-button__icon {
 704           line-height: 27px;
 705         }
 706       }
 707     }
 708
 709     .icon-button,
 710     .text-icon-button {
 711       box-sizing: content-box;
 712       padding: 0 3px;
 713     }
 714
 715     .character-counter__wrapper {
 716       align-self: center;
 717       margin-right: 4px;
 718     }
 719   }
 720
 721   .compose-form__publish {
 722     display: flex;
 723     justify-content: flex-end;
 724     min-width: 0;
 725     flex: 0 0 auto;
 726
 727     .compose-form__publish-button-wrapper {
 728       overflow: hidden;
 729       padding-top: 10px;
 730     }
 731   }
 732 }
 733
 734 .character-counter {
 735   cursor: default;
 736   font-family: $font-sans-serif, sans-serif;
 737   font-size: 14px;
 738   font-weight: 600;
 739   color: $lighter-text-color;
 740
 741   &.character-counter--over {
 742     color: $warning-red;
 743   }
 744 }
 745
 746 .no-reduce-motion .spoiler-input {
 747   transition: height 0.4s ease, opacity 0.4s ease;
 748 }
 749
 750 .emojione {
 751   font-size: inherit;
 752   vertical-align: middle;
 753   object-fit: contain;
 754   margin: -.2ex .15em .2ex;
 755   width: 16px;
 756   height: 16px;
 757
 758   img {
 759     width: auto;
 760   }
 761 }
 762
 763 .reply-indicator {
 764   border-radius: 4px;
 765   margin-bottom: 10px;
 766   background: $ui-primary-color;
 767   padding: 10px;
 768   min-height: 23px;
 769   overflow-y: auto;
 770   flex: 0 2 auto;
 771 }
 772
 773 .reply-indicator__header {
 774   margin-bottom: 5px;
 775   overflow: hidden;
 776 }
 777
 778 .reply-indicator__cancel {
 779   float: right;
 780   line-height: 24px;
 781 }
 782
 783 .reply-indicator__display-name {
 784   color: $inverted-text-color;
 785   display: block;
 786   max-width: 100%;
 787   line-height: 24px;
 788   overflow: hidden;
 789   padding-right: 25px;
 790   text-decoration: none;
 791 }
 792
 793 .reply-indicator__display-avatar {
 794   float: left;
 795   margin-right: 5px;
 796 }
 797
 798 .status__content--with-action {
 799   cursor: pointer;
 800 }
 801
 802 .status__content {
 803   clear: both;
 804 }
 805
 806 .status__content,
 807 .reply-indicator__content {
 808   position: relative;
 809   font-size: 15px;
 810   line-height: 20px;
 811   word-wrap: break-word;
 812   font-weight: 400;
 813   overflow: hidden;
 814   text-overflow: ellipsis;
 815   padding-top: 2px;
 816   color: $primary-text-color;
 817
 818   &:focus {
 819     outline: 0;
 820   }
 821
 822   &.status__content--with-spoiler {
 823     white-space: normal;
 824
 825     .status__content__text {
 826       white-space: pre-wrap;
 827     }
 828   }
 829
 830   .emojione {
 831     width: 20px;
 832     height: 20px;
 833     margin: -3px 0 0;
 834   }
 835
 836   p {
 837     margin-bottom: 20px;
 838     white-space: pre-wrap;
 839     unicode-bidi: plaintext;
 840
 841     &:last-child {
 842       margin-bottom: 0;
 843     }
 844   }
 845
 846   a {
 847     color: $secondary-text-color;
 848     text-decoration: none;
 849     unicode-bidi: isolate;
 850
 851     &:hover {
 852       text-decoration: underline;
 853
 854       .fa {
 855         color: lighten($dark-text-color, 7%);
 856       }
 857     }
 858
 859     &.mention {
 860       &:hover {
 861         text-decoration: none;
 862
 863         span {
 864           text-decoration: underline;
 865         }
 866       }
 867     }
 868
 869     .fa {
 870       color: $dark-text-color;
 871     }
 872   }
 873
 874   a.unhandled-link {
 875     color: lighten($ui-highlight-color, 8%);
 876   }
 877
 878   .status__content__spoiler-link {
 879     background: $action-button-color;
 880
 881     &:hover {
 882       background: lighten($action-button-color, 7%);
 883       text-decoration: none;
 884     }
 885
 886     &::-moz-focus-inner {
 887       border: 0;
 888     }
 889
 890     &::-moz-focus-inner,
 891     &:focus,
 892     &:active {
 893       outline: 0 !important;
 894     }
 895   }
 896
 897   .status__content__text {
 898     display: none;
 899
 900     &.status__content__text--visible {
 901       display: block;
 902     }
 903   }
 904 }
 905
 906 .announcements__item__content {
 907   word-wrap: break-word;
 908   overflow-y: auto;
 909
 910   .emojione {
 911     width: 20px;
 912     height: 20px;
 913     margin: -3px 0 0;
 914   }
 915
 916   p {
 917     margin-bottom: 10px;
 918     white-space: pre-wrap;
 919
 920     &:last-child {
 921       margin-bottom: 0;
 922     }
 923   }
 924
 925   a {
 926     color: $secondary-text-color;
 927     text-decoration: none;
 928
 929     &:hover {
 930       text-decoration: underline;
 931     }
 932
 933     &.mention {
 934       &:hover {
 935         text-decoration: none;
 936
 937         span {
 938           text-decoration: underline;
 939         }
 940       }
 941     }
 942
 943     &.unhandled-link {
 944       color: lighten($ui-highlight-color, 8%);
 945     }
 946   }
 947 }
 948
 949 .status__content.status__content--collapsed {
 950   max-height: 20px * 15; // 15 lines is roughly above 500 characters
 951 }
 952
 953 .status__content__read-more-button {
 954   display: block;
 955   font-size: 15px;
 956   line-height: 20px;
 957   color: lighten($ui-highlight-color, 8%);
 958   border: 0;
 959   background: transparent;
 960   padding: 0;
 961   padding-top: 8px;
 962   text-decoration: none;
 963
 964   &:hover,
 965   &:active {
 966     text-decoration: underline;
 967   }
 968 }
 969
 970 .status__content__spoiler-link {
 971   display: inline-block;
 972   border-radius: 2px;
 973   background: transparent;
 974   border: 0;
 975   color: $inverted-text-color;
 976   font-weight: 700;
 977   font-size: 11px;
 978   padding: 0 6px;
 979   text-transform: uppercase;
 980   line-height: 20px;
 981   cursor: pointer;
 982   vertical-align: middle;
 983 }
 984
 985 .status__wrapper--filtered {
 986   color: $dark-text-color;
 987   border: 0;
 988   font-size: inherit;
 989   text-align: center;
 990   line-height: inherit;
 991   margin: 0;
 992   padding: 15px;
 993   box-sizing: border-box;
 994   width: 100%;
 995   clear: both;
 996   border-bottom: 1px solid lighten($ui-base-color, 8%);
 997 }
 998
 999 .status__prepend-icon-wrapper {
1000   left: -26px;
1001   position: absolute;
1002 }
1003
1004 .focusable {
1005   &:focus {
1006     outline: 0;
1007     background: lighten($ui-base-color, 4%);
1008
1009     .detailed-status,
1010     .detailed-status__action-bar {
1011       background: lighten($ui-base-color, 8%);
1012     }
1013   }
1014 }
1015
1016 .status {
1017   padding: 8px 10px;
1018   padding-left: 68px;
1019   position: relative;
1020   min-height: 54px;
1021   border-bottom: 1px solid lighten($ui-base-color, 8%);
1022   cursor: auto;
1023
1024   @supports (-ms-overflow-style: -ms-autohiding-scrollbar) {
1025     // Add margin to avoid Edge auto-hiding scrollbar appearing over content.
1026     // On Edge 16 this is 16px and Edge <=15 it's 12px, so aim for 16px.
1027     padding-right: 26px; // 10px + 16px
1028   }
1029
1030   @keyframes fade {
1031     0% { opacity: 0; }
1032     100% { opacity: 1; }
1033   }
1034
1035   opacity: 1;
1036   animation: fade 150ms linear;
1037
1038   .video-player,
1039   .audio-player {
1040     margin-top: 8px;
1041   }
1042
1043   &.light {
1044     .status__relative-time,
1045     .status__visibility-icon {
1046       color: $light-text-color;
1047     }
1048
1049     .status__display-name {
1050       color: $inverted-text-color;
1051     }
1052
1053     .display-name {
1054       color: $light-text-color;
1055
1056       strong {
1057         color: $inverted-text-color;
1058       }
1059     }
1060
1061     .status__content {
1062       color: $inverted-text-color;
1063
1064       a {
1065         color: $highlight-text-color;
1066       }
1067
1068       a.status__content__spoiler-link {
1069         color: $primary-text-color;
1070         background: $ui-primary-color;
1071
1072         &:hover {
1073           background: lighten($ui-primary-color, 8%);
1074         }
1075       }
1076     }
1077   }
1078 }
1079
1080 .status__relative-time,
1081 .notification__relative_time {
1082   color: $dark-text-color;
1083   float: right;
1084   font-size: 14px;
1085   padding-bottom: 1px;
1086 }
1087
1088 .status__visibility-icon {
1089   padding: 0 4px;
1090 }
1091
1092 .status__display-name {
1093   color: $dark-text-color;
1094 }
1095
1096 .status__info .status__display-name {
1097   display: block;
1098   max-width: 100%;
1099   padding-right: 25px;
1100 }
1101
1102 .status__info {
1103   font-size: 15px;
1104 }
1105
1106 .status-check-box {
1107   border-bottom: 1px solid $ui-secondary-color;
1108   display: flex;
1109
1110   .status-check-box__status {
1111     margin: 10px 0 10px 10px;
1112     flex: 1;
1113     overflow: hidden;
1114
1115     .media-gallery {
1116       max-width: 250px;
1117     }
1118
1119     .status__content {
1120       padding: 0;
1121       white-space: normal;
1122     }
1123
1124     .video-player,
1125     .audio-player {
1126       margin-top: 8px;
1127       max-width: 250px;
1128     }
1129
1130     .media-gallery__item-thumbnail {
1131       cursor: default;
1132     }
1133   }
1134 }
1135
1136 .status-check-box-toggle {
1137   align-items: center;
1138   display: flex;
1139   flex: 0 0 auto;
1140   justify-content: center;
1141   padding: 10px;
1142 }
1143
1144 .status__prepend {
1145   margin-left: 68px;
1146   color: $dark-text-color;
1147   padding: 8px 0;
1148   padding-bottom: 2px;
1149   font-size: 14px;
1150   position: relative;
1151
1152   .status__display-name strong {
1153     color: $dark-text-color;
1154   }
1155
1156   > span {
1157     display: block;
1158     overflow: hidden;
1159     text-overflow: ellipsis;
1160   }
1161 }
1162
1163 .status__action-bar {
1164   align-items: center;
1165   display: flex;
1166   margin-top: 8px;
1167 }
1168
1169 .status__action-bar-button {
1170   margin-right: 18px;
1171
1172   &.icon-button--with-counter {
1173     margin-right: 14px;
1174   }
1175 }
1176
1177 .status__action-bar-dropdown {
1178   height: 23.15px;
1179   width: 23.15px;
1180 }
1181
1182 .detailed-status__action-bar-dropdown {
1183   flex: 1 1 auto;
1184   display: flex;
1185   align-items: center;
1186   justify-content: center;
1187   position: relative;
1188 }
1189
1190 .detailed-status {
1191   background: lighten($ui-base-color, 4%);
1192   padding: 14px 10px;
1193
1194   &--flex {
1195     display: flex;
1196     flex-wrap: wrap;
1197     justify-content: space-between;
1198     align-items: flex-start;
1199
1200     .status__content,
1201     .detailed-status__meta {
1202       flex: 100%;
1203     }
1204   }
1205
1206   .status__content {
1207     font-size: 19px;
1208     line-height: 24px;
1209
1210     .emojione {
1211       width: 24px;
1212       height: 24px;
1213       margin: -1px 0 0;
1214     }
1215
1216     .status__content__spoiler-link {
1217       line-height: 24px;
1218       margin: -1px 0 0;
1219     }
1220   }
1221
1222   .video-player,
1223   .audio-player {
1224     margin-top: 8px;
1225   }
1226 }
1227
1228 .detailed-status__meta {
1229   margin-top: 15px;
1230   color: $dark-text-color;
1231   font-size: 14px;
1232   line-height: 18px;
1233 }
1234
1235 .detailed-status__action-bar {
1236   background: lighten($ui-base-color, 4%);
1237   border-top: 1px solid lighten($ui-base-color, 8%);
1238   border-bottom: 1px solid lighten($ui-base-color, 8%);
1239   display: flex;
1240   flex-direction: row;
1241   padding: 10px 0;
1242 }
1243
1244 .detailed-status__link {
1245   color: inherit;
1246   text-decoration: none;
1247 }
1248
1249 .detailed-status__favorites,
1250 .detailed-status__reblogs {
1251   display: inline-block;
1252   font-weight: 500;
1253   font-size: 12px;
1254   margin-left: 6px;
1255 }
1256
1257 .reply-indicator__content {
1258   color: $inverted-text-color;
1259   font-size: 14px;
1260
1261   a {
1262     color: $lighter-text-color;
1263   }
1264 }
1265
1266 .domain {
1267   padding: 10px;
1268   border-bottom: 1px solid lighten($ui-base-color, 8%);
1269
1270   .domain__domain-name {
1271     flex: 1 1 auto;
1272     display: block;
1273     color: $primary-text-color;
1274     text-decoration: none;
1275     font-size: 14px;
1276     font-weight: 500;
1277   }
1278 }
1279
1280 .domain__wrapper {
1281   display: flex;
1282 }
1283
1284 .domain_buttons {
1285   height: 18px;
1286   padding: 10px;
1287   white-space: nowrap;
1288 }
1289
1290 .account {
1291   padding: 10px;
1292   border-bottom: 1px solid lighten($ui-base-color, 8%);
1293
1294   &.compact {
1295     padding: 0;
1296     border-bottom: 0;
1297
1298     .account__avatar-wrapper {
1299       margin-left: 0;
1300     }
1301   }
1302
1303   .account__display-name {
1304     flex: 1 1 auto;
1305     display: block;
1306     color: $darker-text-color;
1307     overflow: hidden;
1308     text-decoration: none;
1309     font-size: 14px;
1310
1311     &--with-note {
1312       strong {
1313         display: inline;
1314       }
1315     }
1316   }
1317
1318   &__note {
1319     white-space: nowrap;
1320     overflow: hidden;
1321     text-overflow: ellipsis;
1322     color: $ui-secondary-color;
1323   }
1324 }
1325
1326 .follow-recommendations-account {
1327   .icon-button {
1328     color: $ui-primary-color;
1329
1330     &.active {
1331       color: $valid-value-color;
1332     }
1333   }
1334 }
1335
1336 .account__wrapper {
1337   display: flex;
1338 }
1339
1340 .account__avatar-wrapper {
1341   float: left;
1342   margin-left: 12px;
1343   margin-right: 12px;
1344 }
1345
1346 .account__avatar {
1347   @include avatar-radius;
1348   display: block;
1349   position: relative;
1350
1351   width: 36px;
1352   height: 36px;
1353   background-size: 36px 36px;
1354
1355   &-inline {
1356     display: inline-block;
1357     vertical-align: middle;
1358     margin-right: 5px;
1359   }
1360
1361   &-composite {
1362     @include avatar-radius;
1363     border-radius: 50%;
1364     overflow: hidden;
1365     position: relative;
1366
1367     & > div {
1368       float: left;
1369       position: relative;
1370       box-sizing: border-box;
1371     }
1372
1373     &__label {
1374       display: block;
1375       position: absolute;
1376       top: 50%;
1377       left: 50%;
1378       transform: translate(-50%, -50%);
1379       color: $primary-text-color;
1380       text-shadow: 1px 1px 2px $base-shadow-color;
1381       font-weight: 700;
1382       font-size: 15px;
1383     }
1384   }
1385 }
1386
1387 a .account__avatar {
1388   cursor: pointer;
1389 }
1390
1391 .account__avatar-overlay {
1392   @include avatar-size(48px);
1393
1394   &-base {
1395     @include avatar-radius;
1396     @include avatar-size(36px);
1397
1398     img {
1399       @include avatar-radius;
1400       width: 100%;
1401       height: 100%;
1402     }
1403   }
1404
1405   &-overlay {
1406     @include avatar-radius;
1407     @include avatar-size(24px);
1408
1409     position: absolute;
1410     bottom: 0;
1411     right: 0;
1412     z-index: 1;
1413
1414     img {
1415       @include avatar-radius;
1416       width: 100%;
1417       height: 100%;
1418     }
1419   }
1420 }
1421
1422 .account__relationship {
1423   height: 18px;
1424   padding: 10px;
1425   white-space: nowrap;
1426 }
1427
1428 .account__disclaimer {
1429   padding: 10px;
1430   border-top: 1px solid lighten($ui-base-color, 8%);
1431   color: $dark-text-color;
1432
1433   strong {
1434     font-weight: 500;
1435
1436     @each $lang in $cjk-langs {
1437       &:lang(#{$lang}) {
1438         font-weight: 700;
1439       }
1440     }
1441   }
1442
1443   a {
1444     font-weight: 500;
1445     color: inherit;
1446     text-decoration: underline;
1447
1448     &:hover,
1449     &:focus,
1450     &:active {
1451       text-decoration: none;
1452     }
1453   }
1454 }
1455
1456 .account__action-bar {
1457   border-top: 1px solid lighten($ui-base-color, 8%);
1458   border-bottom: 1px solid lighten($ui-base-color, 8%);
1459   line-height: 36px;
1460   overflow: hidden;
1461   flex: 0 0 auto;
1462   display: flex;
1463 }
1464
1465 .account__action-bar-dropdown {
1466   padding: 10px;
1467
1468   .icon-button {
1469     vertical-align: middle;
1470   }
1471
1472   .dropdown--active {
1473     .dropdown__content.dropdown__right {
1474       left: 6px;
1475       right: initial;
1476     }
1477
1478     &::after {
1479       bottom: initial;
1480       margin-left: 11px;
1481       margin-top: -7px;
1482       right: initial;
1483     }
1484   }
1485 }
1486
1487 .account__action-bar-links {
1488   display: flex;
1489   flex: 1 1 auto;
1490   line-height: 18px;
1491   text-align: center;
1492 }
1493
1494 .account__action-bar__tab {
1495   text-decoration: none;
1496   overflow: hidden;
1497   flex: 0 1 100%;
1498   border-right: 1px solid lighten($ui-base-color, 8%);
1499   padding: 10px 0;
1500   border-bottom: 4px solid transparent;
1501
1502   &.active {
1503     border-bottom: 4px solid $ui-highlight-color;
1504   }
1505
1506   & > span {
1507     display: block;
1508     text-transform: uppercase;
1509     font-size: 11px;
1510     color: $darker-text-color;
1511   }
1512
1513   strong {
1514     display: block;
1515     font-size: 15px;
1516     font-weight: 500;
1517     color: $primary-text-color;
1518
1519     @each $lang in $cjk-langs {
1520       &:lang(#{$lang}) {
1521         font-weight: 700;
1522       }
1523     }
1524   }
1525 }
1526
1527 .account-authorize {
1528   padding: 14px 10px;
1529
1530   .detailed-status__display-name {
1531     display: block;
1532     margin-bottom: 15px;
1533     overflow: hidden;
1534   }
1535 }
1536
1537 .account-authorize__avatar {
1538   float: left;
1539   margin-right: 10px;
1540 }
1541
1542 .status__display-name,
1543 .status__relative-time,
1544 .detailed-status__display-name,
1545 .detailed-status__datetime,
1546 .detailed-status__application,
1547 .account__display-name {
1548   text-decoration: none;
1549 }
1550
1551 .status__display-name,
1552 .account__display-name {
1553   strong {
1554     color: $primary-text-color;
1555   }
1556 }
1557
1558 .muted {
1559   .emojione {
1560     opacity: 0.5;
1561   }
1562 }
1563
1564 .status__display-name,
1565 .reply-indicator__display-name,
1566 .detailed-status__display-name,
1567 a.account__display-name {
1568   &:hover strong {
1569     text-decoration: underline;
1570   }
1571 }
1572
1573 .account__display-name strong {
1574   display: block;
1575   overflow: hidden;
1576   text-overflow: ellipsis;
1577 }
1578
1579 .detailed-status__application,
1580 .detailed-status__datetime {
1581   color: inherit;
1582 }
1583
1584 .detailed-status .button.logo-button {
1585   margin-bottom: 15px;
1586 }
1587
1588 .detailed-status__display-name {
1589   color: $secondary-text-color;
1590   display: block;
1591   line-height: 24px;
1592   margin-bottom: 15px;
1593   overflow: hidden;
1594
1595   strong,
1596   span {
1597     display: block;
1598     text-overflow: ellipsis;
1599     overflow: hidden;
1600   }
1601
1602   strong {
1603     font-size: 16px;
1604     color: $primary-text-color;
1605   }
1606 }
1607
1608 .detailed-status__display-avatar {
1609   float: left;
1610   margin-right: 10px;
1611 }
1612
1613 .status__avatar {
1614   height: 48px;
1615   left: 10px;
1616   position: absolute;
1617   top: 10px;
1618   width: 48px;
1619 }
1620
1621 .status__expand {
1622   width: 68px;
1623   position: absolute;
1624   left: 0;
1625   top: 0;
1626   height: 100%;
1627   cursor: pointer;
1628 }
1629
1630 .muted {
1631   .status__content,
1632   .status__content p,
1633   .status__content a {
1634     color: $dark-text-color;
1635   }
1636
1637   .status__display-name strong {
1638     color: $dark-text-color;
1639   }
1640
1641   .status__avatar {
1642     opacity: 0.5;
1643   }
1644
1645   a.status__content__spoiler-link {
1646     background: $ui-base-lighter-color;
1647     color: $inverted-text-color;
1648
1649     &:hover {
1650       background: lighten($ui-base-lighter-color, 7%);
1651       text-decoration: none;
1652     }
1653   }
1654 }
1655
1656 .notification__message {
1657   margin: 0 10px 0 68px;
1658   padding: 8px 0 0;
1659   cursor: default;
1660   color: $darker-text-color;
1661   font-size: 15px;
1662   line-height: 22px;
1663   position: relative;
1664
1665   .fa {
1666     color: $highlight-text-color;
1667   }
1668
1669   > span {
1670     display: inline;
1671     overflow: hidden;
1672     text-overflow: ellipsis;
1673   }
1674 }
1675
1676 .notification__favourite-icon-wrapper {
1677   left: -26px;
1678   position: absolute;
1679
1680   .star-icon {
1681     color: $gold-star;
1682   }
1683 }
1684
1685 .icon-button.star-icon.active {
1686   color: $gold-star;
1687 }
1688
1689 .icon-button.bookmark-icon.active {
1690   color: $red-bookmark;
1691 }
1692
1693 .no-reduce-motion .icon-button.star-icon {
1694   &.activate {
1695     & > .fa-star {
1696       animation: spring-rotate-in 1s linear;
1697     }
1698   }
1699
1700   &.deactivate {
1701     & > .fa-star {
1702       animation: spring-rotate-out 1s linear;
1703     }
1704   }
1705 }
1706
1707 .notification__display-name {
1708   color: inherit;
1709   font-weight: 500;
1710   text-decoration: none;
1711
1712   &:hover {
1713     color: $primary-text-color;
1714     text-decoration: underline;
1715   }
1716 }
1717
1718 .notification__relative_time {
1719   float: right;
1720 }
1721
1722 .display-name {
1723   display: block;
1724   max-width: 100%;
1725   overflow: hidden;
1726   text-overflow: ellipsis;
1727   white-space: nowrap;
1728 }
1729
1730 .display-name__html {
1731   font-weight: 500;
1732 }
1733
1734 .display-name__account {
1735   font-size: 14px;
1736 }
1737
1738 .status__relative-time,
1739 .detailed-status__datetime {
1740   &:hover {
1741     text-decoration: underline;
1742   }
1743 }
1744
1745 .image-loader {
1746   position: relative;
1747   width: 100%;
1748   height: 100%;
1749   display: flex;
1750   align-items: center;
1751   justify-content: center;
1752   flex-direction: column;
1753   scrollbar-width: none; /* Firefox */
1754   -ms-overflow-style: none;  /* IE 10+ */
1755
1756   * {
1757     scrollbar-width: none; /* Firefox */
1758     -ms-overflow-style: none;  /* IE 10+ */
1759   }
1760
1761   &::-webkit-scrollbar,
1762   *::-webkit-scrollbar {
1763     width: 0;
1764     height: 0;
1765     background: transparent; /* Chrome/Safari/Webkit */
1766   }
1767
1768   .image-loader__preview-canvas {
1769     max-width: $media-modal-media-max-width;
1770     max-height: $media-modal-media-max-height;
1771     background: url('../images/void.png') repeat;
1772     object-fit: contain;
1773   }
1774
1775   .loading-bar {
1776     position: relative;
1777   }
1778
1779   &.image-loader--amorphous .image-loader__preview-canvas {
1780     display: none;
1781   }
1782 }
1783
1784 .zoomable-image {
1785   position: relative;
1786   width: 100%;
1787   height: 100%;
1788   display: flex;
1789   align-items: center;
1790   justify-content: center;
1791
1792   img {
1793     max-width: $media-modal-media-max-width;
1794     max-height: $media-modal-media-max-height;
1795     width: auto;
1796     height: auto;
1797     object-fit: contain;
1798   }
1799 }
1800
1801 .navigation-bar {
1802   padding: 10px;
1803   display: flex;
1804   align-items: center;
1805   flex-shrink: 0;
1806   cursor: default;
1807   color: $darker-text-color;
1808
1809   strong {
1810     color: $secondary-text-color;
1811   }
1812
1813   a {
1814     color: inherit;
1815   }
1816
1817   .permalink {
1818     text-decoration: none;
1819   }
1820
1821   .navigation-bar__actions {
1822     position: relative;
1823
1824     .icon-button.close {
1825       position: absolute;
1826       pointer-events: none;
1827       transform: scale(0, 1) translate(-100%, 0);
1828       opacity: 0;
1829     }
1830
1831     .compose__action-bar .icon-button {
1832       pointer-events: auto;
1833       transform: scale(1, 1) translate(0, 0);
1834       opacity: 1;
1835     }
1836   }
1837 }
1838
1839 .navigation-bar__profile {
1840   flex: 1 1 auto;
1841   margin-left: 8px;
1842   line-height: 20px;
1843   margin-top: -1px;
1844   overflow: hidden;
1845 }
1846
1847 .navigation-bar__profile-account {
1848   display: block;
1849   font-weight: 500;
1850   overflow: hidden;
1851   text-overflow: ellipsis;
1852 }
1853
1854 .navigation-bar__profile-edit {
1855   color: inherit;
1856   text-decoration: none;
1857 }
1858
1859 .dropdown {
1860   display: inline-block;
1861 }
1862
1863 .dropdown__content {
1864   display: none;
1865   position: absolute;
1866 }
1867
1868 .dropdown-menu__separator {
1869   border-bottom: 1px solid darken($ui-secondary-color, 8%);
1870   margin: 5px 7px 6px;
1871   height: 0;
1872 }
1873
1874 .dropdown-menu {
1875   background: $ui-secondary-color;
1876   padding: 4px 0;
1877   border-radius: 4px;
1878   box-shadow: 2px 4px 15px rgba($base-shadow-color, 0.4);
1879   z-index: 9999;
1880
1881   ul {
1882     list-style: none;
1883   }
1884
1885   &.left {
1886     transform-origin: 100% 50%;
1887   }
1888
1889   &.top {
1890     transform-origin: 50% 100%;
1891   }
1892
1893   &.bottom {
1894     transform-origin: 50% 0;
1895   }
1896
1897   &.right {
1898     transform-origin: 0 50%;
1899   }
1900 }
1901
1902 .dropdown-menu__arrow {
1903   position: absolute;
1904   width: 0;
1905   height: 0;
1906   border: 0 solid transparent;
1907
1908   &.left {
1909     right: -5px;
1910     margin-top: -5px;
1911     border-width: 5px 0 5px 5px;
1912     border-left-color: $ui-secondary-color;
1913   }
1914
1915   &.top {
1916     bottom: -5px;
1917     margin-left: -7px;
1918     border-width: 5px 7px 0;
1919     border-top-color: $ui-secondary-color;
1920   }
1921
1922   &.bottom {
1923     top: -5px;
1924     margin-left: -7px;
1925     border-width: 0 7px 5px;
1926     border-bottom-color: $ui-secondary-color;
1927   }
1928
1929   &.right {
1930     left: -5px;
1931     margin-top: -5px;
1932     border-width: 5px 5px 5px 0;
1933     border-right-color: $ui-secondary-color;
1934   }
1935 }
1936
1937 .dropdown-menu__item {
1938   a {
1939     font-size: 13px;
1940     line-height: 18px;
1941     display: block;
1942     padding: 4px 14px;
1943     box-sizing: border-box;
1944     text-decoration: none;
1945     background: $ui-secondary-color;
1946     color: $inverted-text-color;
1947     overflow: hidden;
1948     text-overflow: ellipsis;
1949     white-space: nowrap;
1950
1951     &:focus,
1952     &:hover,
1953     &:active {
1954       background: $ui-highlight-color;
1955       color: $secondary-text-color;
1956       outline: 0;
1957     }
1958   }
1959 }
1960
1961 .dropdown--active .dropdown__content {
1962   display: block;
1963   line-height: 18px;
1964   max-width: 311px;
1965   right: 0;
1966   text-align: left;
1967   z-index: 9999;
1968
1969   & > ul {
1970     list-style: none;
1971     background: $ui-secondary-color;
1972     padding: 4px 0;
1973     border-radius: 4px;
1974     box-shadow: 0 0 15px rgba($base-shadow-color, 0.4);
1975     min-width: 140px;
1976     position: relative;
1977   }
1978
1979   &.dropdown__right {
1980     right: 0;
1981   }
1982
1983   &.dropdown__left {
1984     & > ul {
1985       left: -98px;
1986     }
1987   }
1988
1989   & > ul > li > a {
1990     font-size: 13px;
1991     line-height: 18px;
1992     display: block;
1993     padding: 4px 14px;
1994     box-sizing: border-box;
1995     text-decoration: none;
1996     background: $ui-secondary-color;
1997     color: $inverted-text-color;
1998     overflow: hidden;
1999     text-overflow: ellipsis;
2000     white-space: nowrap;
2001
2002     &:focus {
2003       outline: 0;
2004     }
2005
2006     &:hover {
2007       background: $ui-highlight-color;
2008       color: $secondary-text-color;
2009     }
2010   }
2011 }
2012
2013 .dropdown__icon {
2014   vertical-align: middle;
2015 }
2016
2017 .columns-area {
2018   display: flex;
2019   flex: 1 1 auto;
2020   flex-direction: row;
2021   justify-content: flex-start;
2022   overflow-x: auto;
2023   position: relative;
2024
2025   &.unscrollable {
2026     overflow-x: hidden;
2027   }
2028
2029   &__panels {
2030     display: flex;
2031     justify-content: center;
2032     width: 100%;
2033     height: 100%;
2034     min-height: 100vh;
2035
2036     &__pane {
2037       height: 100%;
2038       overflow: hidden;
2039       pointer-events: none;
2040       display: flex;
2041       justify-content: flex-end;
2042       min-width: 285px;
2043
2044       &--start {
2045         justify-content: flex-start;
2046       }
2047
2048       &__inner {
2049         position: fixed;
2050         width: 285px;
2051         pointer-events: auto;
2052         height: 100%;
2053       }
2054     }
2055
2056     &__main {
2057       box-sizing: border-box;
2058       width: 100%;
2059       max-width: 600px;
2060       flex: 0 0 auto;
2061       display: flex;
2062       flex-direction: column;
2063
2064       @media screen and (min-width: $no-gap-breakpoint) {
2065         padding: 0 10px;
2066       }
2067     }
2068   }
2069 }
2070
2071 .tabs-bar__wrapper {
2072   background: darken($ui-base-color, 8%);
2073   position: sticky;
2074   top: 0;
2075   z-index: 2;
2076   padding-top: 0;
2077
2078   @media screen and (min-width: $no-gap-breakpoint) {
2079     padding-top: 10px;
2080   }
2081
2082   .tabs-bar {
2083     margin-bottom: 0;
2084
2085     @media screen and (min-width: $no-gap-breakpoint) {
2086       margin-bottom: 10px;
2087     }
2088   }
2089 }
2090
2091 .react-swipeable-view-container {
2092   &,
2093   .columns-area,
2094   .drawer,
2095   .column {
2096     height: 100%;
2097   }
2098 }
2099
2100 .react-swipeable-view-container > * {
2101   display: flex;
2102   align-items: center;
2103   justify-content: center;
2104   height: 100%;
2105 }
2106
2107 .column {
2108   width: 350px;
2109   position: relative;
2110   box-sizing: border-box;
2111   display: flex;
2112   flex-direction: column;
2113
2114   > .scrollable {
2115     background: $ui-base-color;
2116   }
2117 }
2118
2119 .ui {
2120   flex: 0 0 auto;
2121   display: flex;
2122   flex-direction: column;
2123   width: 100%;
2124   height: 100%;
2125 }
2126
2127 .drawer {
2128   width: 300px;
2129   box-sizing: border-box;
2130   display: flex;
2131   flex-direction: column;
2132   overflow-y: hidden;
2133 }
2134
2135 .drawer__tab {
2136   display: block;
2137   flex: 1 1 auto;
2138   padding: 15px 5px 13px;
2139   color: $darker-text-color;
2140   text-decoration: none;
2141   text-align: center;
2142   font-size: 16px;
2143   border-bottom: 2px solid transparent;
2144 }
2145
2146 .column,
2147 .drawer {
2148   flex: 1 1 100%;
2149   overflow: hidden;
2150 }
2151
2152 @media screen and (min-width: 631px) {
2153   .columns-area {
2154     padding: 0;
2155   }
2156
2157   .column,
2158   .drawer {
2159     flex: 0 0 auto;
2160     padding: 10px;
2161     padding-left: 5px;
2162     padding-right: 5px;
2163
2164     &:first-child {
2165       padding-left: 10px;
2166     }
2167
2168     &:last-child {
2169       padding-right: 10px;
2170     }
2171   }
2172
2173   .columns-area > div {
2174     .column,
2175     .drawer {
2176       padding-left: 5px;
2177       padding-right: 5px;
2178     }
2179   }
2180 }
2181
2182 .tabs-bar {
2183   box-sizing: border-box;
2184   display: flex;
2185   background: lighten($ui-base-color, 8%);
2186   flex: 0 0 auto;
2187   overflow-y: auto;
2188 }
2189
2190 .tabs-bar__link {
2191   display: block;
2192   flex: 1 1 auto;
2193   padding: 15px 10px;
2194   padding-bottom: 13px;
2195   color: $primary-text-color;
2196   text-decoration: none;
2197   text-align: center;
2198   font-size: 14px;
2199   font-weight: 500;
2200   border-bottom: 2px solid lighten($ui-base-color, 8%);
2201   transition: all 50ms linear;
2202   transition-property: border-bottom, background, color;
2203
2204   .fa {
2205     font-weight: 400;
2206     font-size: 16px;
2207   }
2208
2209   &:hover,
2210   &:focus,
2211   &:active {
2212     @media screen and (min-width: 631px) {
2213       background: lighten($ui-base-color, 14%);
2214       border-bottom-color: lighten($ui-base-color, 14%);
2215     }
2216   }
2217
2218   &.active {
2219     border-bottom: 2px solid $highlight-text-color;
2220     color: $highlight-text-color;
2221   }
2222
2223   span {
2224     margin-left: 5px;
2225     display: none;
2226   }
2227 }
2228
2229 @media screen and (min-width: 600px) {
2230   .tabs-bar__link {
2231     span {
2232       display: inline;
2233     }
2234   }
2235 }
2236
2237 .columns-area--mobile {
2238   flex-direction: column;
2239   width: 100%;
2240   height: 100%;
2241   margin: 0 auto;
2242
2243   .column,
2244   .drawer {
2245     width: 100%;
2246     height: 100%;
2247     padding: 0;
2248   }
2249
2250   .directory__list {
2251     display: grid;
2252     grid-gap: 10px;
2253     grid-template-columns: minmax(0, 50%) minmax(0, 50%);
2254
2255     @media screen and (max-width: $no-gap-breakpoint) {
2256       display: block;
2257     }
2258   }
2259
2260   .directory__card {
2261     margin-bottom: 0;
2262   }
2263
2264   .filter-form {
2265     display: flex;
2266   }
2267
2268   .autosuggest-textarea__textarea {
2269     font-size: 16px;
2270   }
2271
2272   .search__input {
2273     line-height: 18px;
2274     font-size: 16px;
2275     padding: 15px;
2276     padding-right: 30px;
2277   }
2278
2279   .search__icon .fa {
2280     top: 15px;
2281   }
2282
2283   .scrollable {
2284     overflow: visible;
2285
2286     @supports(display: grid) {
2287       contain: content;
2288     }
2289   }
2290
2291   @media screen and (min-width: $no-gap-breakpoint) {
2292     padding: 10px 0;
2293     padding-top: 0;
2294   }
2295
2296   @media screen and (min-width: 630px) {
2297     .detailed-status {
2298       padding: 15px;
2299
2300       .media-gallery,
2301       .video-player,
2302       .audio-player {
2303         margin-top: 15px;
2304       }
2305     }
2306
2307     .account__header__bar {
2308       padding: 5px 10px;
2309     }
2310
2311     .navigation-bar,
2312     .compose-form {
2313       padding: 15px;
2314     }
2315
2316     .compose-form .compose-form__publish .compose-form__publish-button-wrapper {
2317       padding-top: 15px;
2318     }
2319
2320     .status {
2321       padding: 15px 15px 15px (48px + 15px * 2);
2322       min-height: 48px + 2px;
2323
2324       &__avatar {
2325         left: 15px;
2326         top: 17px;
2327       }
2328
2329       &__content {
2330         padding-top: 5px;
2331       }
2332
2333       &__prepend {
2334         margin-left: 48px + 15px * 2;
2335         padding-top: 15px;
2336       }
2337
2338       &__prepend-icon-wrapper {
2339         left: -32px;
2340       }
2341
2342       .media-gallery,
2343       &__action-bar,
2344       .video-player,
2345       .audio-player {
2346         margin-top: 10px;
2347       }
2348     }
2349
2350     .account {
2351       padding: 15px 10px;
2352
2353       &__header__bio {
2354         margin: 0 -10px;
2355       }
2356     }
2357
2358     .notification {
2359       &__message {
2360         margin-left: 48px + 15px * 2;
2361         padding-top: 15px;
2362       }
2363
2364       &__favourite-icon-wrapper {
2365         left: -32px;
2366       }
2367
2368       .status {
2369         padding-top: 8px;
2370       }
2371
2372       .account {
2373         padding-top: 8px;
2374       }
2375
2376       .account__avatar-wrapper {
2377         margin-left: 17px;
2378         margin-right: 15px;
2379       }
2380     }
2381   }
2382 }
2383
2384 .floating-action-button {
2385   position: fixed;
2386   display: flex;
2387   justify-content: center;
2388   align-items: center;
2389   width: 3.9375rem;
2390   height: 3.9375rem;
2391   bottom: 1.3125rem;
2392   right: 1.3125rem;
2393   background: darken($ui-highlight-color, 3%);
2394   color: $white;
2395   border-radius: 50%;
2396   font-size: 21px;
2397   line-height: 21px;
2398   text-decoration: none;
2399   box-shadow: 2px 3px 9px rgba($base-shadow-color, 0.4);
2400
2401   &:hover,
2402   &:focus,
2403   &:active {
2404     background: lighten($ui-highlight-color, 7%);
2405   }
2406 }
2407
2408 @media screen and (min-width: $no-gap-breakpoint) {
2409   .tabs-bar {
2410     width: 100%;
2411   }
2412
2413   .react-swipeable-view-container .columns-area--mobile {
2414     height: calc(100% - 10px) !important;
2415   }
2416
2417   .getting-started__wrapper,
2418   .search {
2419     margin-bottom: 10px;
2420   }
2421 }
2422
2423 @media screen and (max-width: 600px + (285px * 1) + (10px * 1)) {
2424   .columns-area__panels__pane--compositional {
2425     display: none;
2426   }
2427 }
2428
2429 @media screen and (min-width: 600px + (285px * 1) + (10px * 1)) {
2430   .floating-action-button,
2431   .tabs-bar__link.optional {
2432     display: none;
2433   }
2434
2435   .search-page .search {
2436     display: none;
2437   }
2438 }
2439
2440 @media screen and (max-width: 600px + (285px * 2) + (10px * 2)) {
2441   .columns-area__panels__pane--navigational {
2442     display: none;
2443   }
2444 }
2445
2446 @media screen and (min-width: 600px + (285px * 2) + (10px * 2)) {
2447   .tabs-bar {
2448     display: none;
2449   }
2450 }
2451
2452 .icon-with-badge {
2453   position: relative;
2454
2455   &__badge {
2456     position: absolute;
2457     left: 9px;
2458     top: -13px;
2459     background: $ui-highlight-color;
2460     border: 2px solid lighten($ui-base-color, 8%);
2461     padding: 1px 6px;
2462     border-radius: 6px;
2463     font-size: 10px;
2464     font-weight: 500;
2465     line-height: 14px;
2466     color: $primary-text-color;
2467   }
2468
2469   &__issue-badge {
2470     position: absolute;
2471     left: 11px;
2472     bottom: 1px;
2473     display: block;
2474     background: $error-red;
2475     border-radius: 50%;
2476     width: 0.625rem;
2477     height: 0.625rem;
2478   }
2479 }
2480
2481 .column-link--transparent .icon-with-badge__badge {
2482   border-color: darken($ui-base-color, 8%);
2483 }
2484
2485 .column-title {
2486   text-align: center;
2487   padding: 40px;
2488
2489   .logo {
2490     fill: $primary-text-color;
2491     width: 50px;
2492     margin: 0 auto;
2493     margin-bottom: 40px;
2494   }
2495
2496   h3 {
2497     font-size: 24px;
2498     line-height: 1.5;
2499     font-weight: 700;
2500     margin-bottom: 10px;
2501   }
2502
2503   p {
2504     font-size: 16px;
2505     line-height: 24px;
2506     font-weight: 400;
2507     color: $darker-text-color;
2508   }
2509 }
2510
2511 .follow-recommendations-container {
2512   display: flex;
2513   flex-direction: column;
2514 }
2515
2516 .column-actions {
2517   display: flex;
2518   align-items: start;
2519   justify-content: center;
2520   padding: 40px;
2521   padding-top: 40px;
2522   padding-bottom: 200px;
2523   flex-grow: 1;
2524   position: relative;
2525
2526   &__background {
2527     position: absolute;
2528     left: 0;
2529     bottom: 0;
2530     height: 220px;
2531     width: auto;
2532   }
2533 }
2534
2535 .column-list {
2536   margin: 0 20px;
2537   border: 1px solid lighten($ui-base-color, 8%);
2538   background: darken($ui-base-color, 2%);
2539   border-radius: 4px;
2540
2541   &__empty-message {
2542     padding: 40px;
2543     text-align: center;
2544     font-size: 16px;
2545     line-height: 24px;
2546     font-weight: 400;
2547     color: $darker-text-color;
2548   }
2549 }
2550
2551 .compose-panel {
2552   width: 285px;
2553   margin-top: 10px;
2554   display: flex;
2555   flex-direction: column;
2556   height: calc(100% - 10px);
2557   overflow-y: hidden;
2558
2559   .navigation-bar {
2560     padding-top: 20px;
2561     padding-bottom: 20px;
2562     flex: 0 1 48px;
2563     min-height: 20px;
2564   }
2565
2566   .flex-spacer {
2567     background: transparent;
2568   }
2569
2570   .compose-form {
2571     flex: 1;
2572     overflow-y: hidden;
2573     display: flex;
2574     flex-direction: column;
2575     min-height: 310px;
2576     padding-bottom: 71px;
2577     margin-bottom: -71px;
2578   }
2579
2580   .compose-form__autosuggest-wrapper {
2581     overflow-y: auto;
2582     background-color: $white;
2583     border-radius: 4px 4px 0 0;
2584     flex: 0 1 auto;
2585   }
2586
2587   .autosuggest-textarea__textarea {
2588     overflow-y: hidden;
2589   }
2590
2591   .compose-form__upload-thumbnail {
2592     height: 80px;
2593   }
2594 }
2595
2596 .navigation-panel {
2597   margin-top: 10px;
2598   margin-bottom: 10px;
2599   height: calc(100% - 20px);
2600   overflow-y: auto;
2601   display: flex;
2602   flex-direction: column;
2603
2604   & > a {
2605     flex: 0 0 auto;
2606   }
2607
2608   hr {
2609     flex: 0 0 auto;
2610     border: 0;
2611     background: transparent;
2612     border-top: 1px solid lighten($ui-base-color, 4%);
2613     margin: 10px 0;
2614   }
2615
2616   .flex-spacer {
2617     background: transparent;
2618   }
2619 }
2620
2621 .drawer__pager {
2622   box-sizing: border-box;
2623   padding: 0;
2624   flex-grow: 1;
2625   position: relative;
2626   overflow: hidden;
2627   display: flex;
2628 }
2629
2630 .drawer__inner {
2631   position: absolute;
2632   top: 0;
2633   left: 0;
2634   background: lighten($ui-base-color, 13%);
2635   box-sizing: border-box;
2636   padding: 0;
2637   display: flex;
2638   flex-direction: column;
2639   overflow: hidden;
2640   overflow-y: auto;
2641   width: 100%;
2642   height: 100%;
2643
2644   &.darker {
2645     background: $ui-base-color;
2646   }
2647 }
2648
2649 .drawer__inner__mastodon {
2650   background: lighten($ui-base-color, 13%) url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 234.80078 31.757813" width="234.80078" height="31.757812"><path d="M19.599609 0c-1.05 0-2.10039.375-2.90039 1.125L0 16.925781v14.832031h234.80078V17.025391l-16.5-15.900391c-1.6-1.5-4.20078-1.5-5.80078 0l-13.80078 13.099609c-1.6 1.5-4.19883 1.5-5.79883 0L179.09961 1.125c-1.6-1.5-4.19883-1.5-5.79883 0L159.5 14.224609c-1.6 1.5-4.20078 1.5-5.80078 0L139.90039 1.125c-1.6-1.5-4.20078-1.5-5.80078 0l-13.79883 13.099609c-1.6 1.5-4.20078 1.5-5.80078 0L100.69922 1.125c-1.600001-1.5-4.198829-1.5-5.798829 0l-13.59961 13.099609c-1.6 1.5-4.200781 1.5-5.800781 0L61.699219 1.125c-1.6-1.5-4.198828-1.5-5.798828 0L42.099609 14.224609c-1.6 1.5-4.198828 1.5-5.798828 0L22.5 1.125C21.7.375 20.649609 0 19.599609 0z" fill="#{hex-color($ui-base-color)}"/></svg>') no-repeat bottom / 100% auto;
2651   flex: 1;
2652   min-height: 47px;
2653   display: none;
2654
2655   > img {
2656     display: block;
2657     object-fit: contain;
2658     object-position: bottom left;
2659     width: 85%;
2660     height: 100%;
2661     pointer-events: none;
2662     user-drag: none;
2663     user-select: none;
2664   }
2665
2666   @media screen and (min-height: 640px) {
2667     display: block;
2668   }
2669 }
2670
2671 .pseudo-drawer {
2672   background: lighten($ui-base-color, 13%);
2673   font-size: 13px;
2674   text-align: left;
2675 }
2676
2677 .drawer__header {
2678   flex: 0 0 auto;
2679   font-size: 16px;
2680   background: lighten($ui-base-color, 8%);
2681   margin-bottom: 10px;
2682   display: flex;
2683   flex-direction: row;
2684
2685   a {
2686     transition: background 100ms ease-in;
2687
2688     &:hover {
2689       background: lighten($ui-base-color, 3%);
2690       transition: background 200ms ease-out;
2691     }
2692   }
2693 }
2694
2695 .scrollable {
2696   overflow-y: scroll;
2697   overflow-x: hidden;
2698   flex: 1 1 auto;
2699   -webkit-overflow-scrolling: touch;
2700
2701   &.optionally-scrollable {
2702     overflow-y: auto;
2703   }
2704
2705   @supports(display: grid) { // hack to fix Chrome <57
2706     contain: strict;
2707   }
2708
2709   &--flex {
2710     display: flex;
2711     flex-direction: column;
2712   }
2713
2714   &__append {
2715     flex: 1 1 auto;
2716     position: relative;
2717     min-height: 120px;
2718   }
2719 }
2720
2721 .scrollable.fullscreen {
2722   @supports(display: grid) { // hack to fix Chrome <57
2723     contain: none;
2724   }
2725 }
2726
2727 .column-back-button {
2728   box-sizing: border-box;
2729   width: 100%;
2730   background: lighten($ui-base-color, 4%);
2731   color: $highlight-text-color;
2732   cursor: pointer;
2733   flex: 0 0 auto;
2734   font-size: 16px;
2735   line-height: inherit;
2736   border: 0;
2737   text-align: unset;
2738   padding: 15px;
2739   margin: 0;
2740   z-index: 3;
2741   outline: 0;
2742
2743   &:hover {
2744     text-decoration: underline;
2745   }
2746 }
2747
2748 .column-header__back-button {
2749   background: lighten($ui-base-color, 4%);
2750   border: 0;
2751   font-family: inherit;
2752   color: $highlight-text-color;
2753   cursor: pointer;
2754   white-space: nowrap;
2755   font-size: 16px;
2756   padding: 0 5px 0 0;
2757   z-index: 3;
2758
2759   &:hover {
2760     text-decoration: underline;
2761   }
2762
2763   &:last-child {
2764     padding: 0 15px 0 0;
2765   }
2766 }
2767
2768 .column-back-button__icon {
2769   display: inline-block;
2770   margin-right: 5px;
2771 }
2772
2773 .column-back-button--slim {
2774   position: relative;
2775 }
2776
2777 .column-back-button--slim-button {
2778   cursor: pointer;
2779   flex: 0 0 auto;
2780   font-size: 16px;
2781   padding: 15px;
2782   position: absolute;
2783   right: 0;
2784   top: -48px;
2785 }
2786
2787 .react-toggle {
2788   display: inline-block;
2789   position: relative;
2790   cursor: pointer;
2791   background-color: transparent;
2792   border: 0;
2793   padding: 0;
2794   user-select: none;
2795   -webkit-tap-highlight-color: rgba($base-overlay-background, 0);
2796   -webkit-tap-highlight-color: transparent;
2797 }
2798
2799 .react-toggle-screenreader-only {
2800   border: 0;
2801   clip: rect(0 0 0 0);
2802   height: 1px;
2803   margin: -1px;
2804   overflow: hidden;
2805   padding: 0;
2806   position: absolute;
2807   width: 1px;
2808 }
2809
2810 .react-toggle--disabled {
2811   cursor: not-allowed;
2812   opacity: 0.5;
2813   transition: opacity 0.25s;
2814 }
2815
2816 .react-toggle-track {
2817   width: 50px;
2818   height: 24px;
2819   padding: 0;
2820   border-radius: 30px;
2821   background-color: $ui-base-color;
2822   transition: background-color 0.2s ease;
2823 }
2824
2825 .react-toggle:is(:hover, :focus-within):not(.react-toggle--disabled) .react-toggle-track {
2826   background-color: darken($ui-base-color, 10%);
2827 }
2828
2829 .react-toggle--checked .react-toggle-track {
2830   background-color: $ui-highlight-color;
2831 }
2832
2833 .react-toggle--checked:is(:hover, :focus-within):not(.react-toggle--disabled) .react-toggle-track {
2834   background-color: lighten($ui-highlight-color, 10%);
2835 }
2836
2837 .react-toggle-track-check {
2838   position: absolute;
2839   width: 14px;
2840   height: 10px;
2841   top: 0;
2842   bottom: 0;
2843   margin-top: auto;
2844   margin-bottom: auto;
2845   line-height: 0;
2846   left: 8px;
2847   opacity: 0;
2848   transition: opacity 0.25s ease;
2849 }
2850
2851 .react-toggle--checked .react-toggle-track-check {
2852   opacity: 1;
2853   transition: opacity 0.25s ease;
2854 }
2855
2856 .react-toggle-track-x {
2857   position: absolute;
2858   width: 10px;
2859   height: 10px;
2860   top: 0;
2861   bottom: 0;
2862   margin-top: auto;
2863   margin-bottom: auto;
2864   line-height: 0;
2865   right: 10px;
2866   opacity: 1;
2867   transition: opacity 0.25s ease;
2868 }
2869
2870 .react-toggle--checked .react-toggle-track-x {
2871   opacity: 0;
2872 }
2873
2874 .react-toggle-thumb {
2875   position: absolute;
2876   top: 1px;
2877   left: 1px;
2878   width: 22px;
2879   height: 22px;
2880   border: 1px solid $ui-base-color;
2881   border-radius: 50%;
2882   background-color: darken($simple-background-color, 2%);
2883   box-sizing: border-box;
2884   transition: all 0.25s ease;
2885   transition-property: border-color, left;
2886 }
2887
2888 .react-toggle--checked .react-toggle-thumb {
2889   left: 27px;
2890   border-color: $ui-highlight-color;
2891 }
2892
2893 .column-link {
2894   background: lighten($ui-base-color, 8%);
2895   color: $primary-text-color;
2896   display: block;
2897   font-size: 16px;
2898   padding: 15px;
2899   text-decoration: none;
2900
2901   &:hover,
2902   &:focus,
2903   &:active {
2904     background: lighten($ui-base-color, 11%);
2905   }
2906
2907   &:focus {
2908     outline: 0;
2909   }
2910
2911   &--transparent {
2912     background: transparent;
2913     color: $ui-secondary-color;
2914
2915     &:hover,
2916     &:focus,
2917     &:active {
2918       background: transparent;
2919       color: $primary-text-color;
2920     }
2921
2922     &.active {
2923       color: $ui-highlight-color;
2924     }
2925   }
2926 }
2927
2928 .column-link__icon {
2929   display: inline-block;
2930   margin-right: 5px;
2931 }
2932
2933 .column-link__badge {
2934   display: inline-block;
2935   border-radius: 4px;
2936   font-size: 12px;
2937   line-height: 19px;
2938   font-weight: 500;
2939   background: $ui-base-color;
2940   padding: 4px 8px;
2941   margin: -6px 10px;
2942 }
2943
2944 .column-subheading {
2945   background: $ui-base-color;
2946   color: $dark-text-color;
2947   padding: 8px 20px;
2948   font-size: 12px;
2949   font-weight: 500;
2950   text-transform: uppercase;
2951   cursor: default;
2952 }
2953
2954 .getting-started__wrapper,
2955 .getting-started,
2956 .flex-spacer {
2957   background: $ui-base-color;
2958 }
2959
2960 .getting-started__wrapper {
2961   flex: 0 0 auto;
2962 }
2963
2964 .flex-spacer {
2965   flex: 1 1 auto;
2966 }
2967
2968 .getting-started {
2969   color: $dark-text-color;
2970   overflow: auto;
2971
2972   &__footer {
2973     flex: 0 0 auto;
2974     padding: 10px;
2975     padding-top: 20px;
2976     z-index: 1;
2977
2978     ul {
2979       margin-bottom: 10px;
2980     }
2981
2982     ul li {
2983       display: inline;
2984     }
2985
2986     p {
2987       color: $dark-text-color;
2988       font-size: 13px;
2989       margin-bottom: 20px;
2990
2991       a {
2992         color: $dark-text-color;
2993         text-decoration: underline;
2994       }
2995     }
2996
2997     a {
2998       text-decoration: none;
2999       color: $darker-text-color;
3000
3001       &:hover,
3002       &:focus,
3003       &:active {
3004         text-decoration: underline;
3005       }
3006     }
3007   }
3008
3009   &__trends {
3010     flex: 0 1 auto;
3011     opacity: 1;
3012     animation: fade 150ms linear;
3013     margin-top: 10px;
3014
3015     h4 {
3016       font-size: 12px;
3017       text-transform: uppercase;
3018       color: $darker-text-color;
3019       padding: 10px;
3020       font-weight: 500;
3021       border-bottom: 1px solid lighten($ui-base-color, 8%);
3022     }
3023
3024     @media screen and (max-height: 810px) {
3025       .trends__item:nth-of-type(3) {
3026         display: none;
3027       }
3028     }
3029
3030     @media screen and (max-height: 720px) {
3031       .trends__item:nth-of-type(2) {
3032         display: none;
3033       }
3034     }
3035
3036     @media screen and (max-height: 670px) {
3037       display: none;
3038     }
3039
3040     .trends__item {
3041       border-bottom: 0;
3042       padding: 10px;
3043
3044       &__current {
3045         color: $darker-text-color;
3046       }
3047     }
3048   }
3049 }
3050
3051 .keyboard-shortcuts {
3052   padding: 8px 0 0;
3053   overflow: hidden;
3054
3055   thead {
3056     position: absolute;
3057     left: -9999px;
3058   }
3059
3060   td {
3061     padding: 0 10px 8px;
3062   }
3063
3064   kbd {
3065     display: inline-block;
3066     padding: 3px 5px;
3067     background-color: lighten($ui-base-color, 8%);
3068     border: 1px solid darken($ui-base-color, 4%);
3069   }
3070 }
3071
3072 .setting-text {
3073   display: block;
3074   box-sizing: border-box;
3075   width: 100%;
3076   margin: 0;
3077   color: $inverted-text-color;
3078   background: $simple-background-color;
3079   padding: 10px;
3080   font-family: inherit;
3081   font-size: 14px;
3082   resize: vertical;
3083   border: 0;
3084   outline: 0;
3085   border-radius: 4px;
3086
3087   &:focus {
3088     outline: 0;
3089   }
3090
3091   @media screen and (max-width: 600px) {
3092     font-size: 16px;
3093   }
3094 }
3095
3096 button.icon-button i.fa-retweet {
3097   background-position: 0 0;
3098   height: 19px;
3099   transition: background-position 0.9s steps(10);
3100   transition-duration: 0s;
3101   vertical-align: middle;
3102   width: 22px;
3103
3104   &::before {
3105     display: none !important;
3106   }
3107 }
3108
3109 button.icon-button.active i.fa-retweet {
3110   transition-duration: 0.9s;
3111   background-position: 0 100%;
3112 }
3113
3114 .reduce-motion button.icon-button i.fa-retweet,
3115 .reduce-motion button.icon-button.active i.fa-retweet {
3116   transition: none;
3117 }
3118
3119 .status-card {
3120   position: relative;
3121   display: flex;
3122   font-size: 14px;
3123   border: 1px solid lighten($ui-base-color, 8%);
3124   border-radius: 4px;
3125   color: $dark-text-color;
3126   margin-top: 14px;
3127   text-decoration: none;
3128   overflow: hidden;
3129
3130   &__actions {
3131     bottom: 0;
3132     left: 0;
3133     position: absolute;
3134     right: 0;
3135     top: 0;
3136     display: flex;
3137     justify-content: center;
3138     align-items: center;
3139
3140     & > div {
3141       background: rgba($base-shadow-color, 0.6);
3142       border-radius: 8px;
3143       padding: 12px 9px;
3144       flex: 0 0 auto;
3145       display: flex;
3146       justify-content: center;
3147       align-items: center;
3148     }
3149
3150     button,
3151     a {
3152       display: inline;
3153       color: $secondary-text-color;
3154       background: transparent;
3155       border: 0;
3156       padding: 0 8px;
3157       text-decoration: none;
3158       font-size: 18px;
3159       line-height: 18px;
3160
3161       &:hover,
3162       &:active,
3163       &:focus {
3164         color: $primary-text-color;
3165       }
3166     }
3167
3168     a {
3169       font-size: 19px;
3170       position: relative;
3171       bottom: -1px;
3172     }
3173   }
3174 }
3175
3176 a.status-card {
3177   cursor: pointer;
3178
3179   &:hover {
3180     background: lighten($ui-base-color, 8%);
3181   }
3182 }
3183
3184 .status-card-photo {
3185   cursor: zoom-in;
3186   display: block;
3187   text-decoration: none;
3188   width: 100%;
3189   height: auto;
3190   margin: 0;
3191 }
3192
3193 .status-card-video {
3194   iframe {
3195     width: 100%;
3196     height: 100%;
3197   }
3198 }
3199
3200 .status-card__title {
3201   display: block;
3202   font-weight: 500;
3203   margin-bottom: 5px;
3204   color: $darker-text-color;
3205   overflow: hidden;
3206   text-overflow: ellipsis;
3207   white-space: nowrap;
3208   text-decoration: none;
3209 }
3210
3211 .status-card__content {
3212   flex: 1 1 auto;
3213   overflow: hidden;
3214   padding: 14px 14px 14px 8px;
3215 }
3216
3217 .status-card__description {
3218   color: $darker-text-color;
3219 }
3220
3221 .status-card__host {
3222   display: block;
3223   margin-top: 5px;
3224   font-size: 13px;
3225   overflow: hidden;
3226   text-overflow: ellipsis;
3227   white-space: nowrap;
3228 }
3229
3230 .status-card__image {
3231   flex: 0 0 100px;
3232   background: lighten($ui-base-color, 8%);
3233   position: relative;
3234
3235   & > .fa {
3236     font-size: 21px;
3237     position: absolute;
3238     transform-origin: 50% 50%;
3239     top: 50%;
3240     left: 50%;
3241     transform: translate(-50%, -50%);
3242   }
3243 }
3244
3245 .status-card.horizontal {
3246   display: block;
3247
3248   .status-card__image {
3249     width: 100%;
3250   }
3251
3252   .status-card__image-image,
3253   .status-card__image-preview {
3254     border-radius: 4px 4px 0 0;
3255   }
3256
3257   .status-card__title {
3258     white-space: inherit;
3259   }
3260 }
3261
3262 .status-card.compact {
3263   border-color: lighten($ui-base-color, 4%);
3264
3265   &.interactive {
3266     border: 0;
3267   }
3268
3269   .status-card__content {
3270     padding: 8px;
3271     padding-top: 10px;
3272   }
3273
3274   .status-card__title {
3275     white-space: nowrap;
3276   }
3277
3278   .status-card__image {
3279     flex: 0 0 60px;
3280   }
3281 }
3282
3283 a.status-card.compact:hover {
3284   background-color: lighten($ui-base-color, 4%);
3285 }
3286
3287 .status-card__image-image {
3288   border-radius: 4px 0 0 4px;
3289   display: block;
3290   margin: 0;
3291   width: 100%;
3292   height: 100%;
3293   object-fit: cover;
3294   background-size: cover;
3295   background-position: center center;
3296 }
3297
3298 .status-card__image-preview {
3299   border-radius: 4px 0 0 4px;
3300   display: block;
3301   margin: 0;
3302   width: 100%;
3303   height: 100%;
3304   object-fit: fill;
3305   position: absolute;
3306   top: 0;
3307   left: 0;
3308   z-index: 0;
3309   background: $base-overlay-background;
3310
3311   &--hidden {
3312     display: none;
3313   }
3314 }
3315
3316 .load-more {
3317   display: block;
3318   color: $dark-text-color;
3319   background-color: transparent;
3320   border: 0;
3321   font-size: inherit;
3322   text-align: center;
3323   line-height: inherit;
3324   margin: 0;
3325   padding: 15px;
3326   box-sizing: border-box;
3327   width: 100%;
3328   clear: both;
3329   text-decoration: none;
3330
3331   &:hover {
3332     background: lighten($ui-base-color, 2%);
3333   }
3334 }
3335
3336 .load-gap {
3337   border-bottom: 1px solid lighten($ui-base-color, 8%);
3338 }
3339
3340 .timeline-hint {
3341   text-align: center;
3342   color: $darker-text-color;
3343   padding: 15px;
3344   box-sizing: border-box;
3345   width: 100%;
3346   cursor: default;
3347
3348   strong {
3349     font-weight: 500;
3350   }
3351
3352   a {
3353     color: lighten($ui-highlight-color, 8%);
3354     text-decoration: none;
3355
3356     &:hover,
3357     &:focus,
3358     &:active {
3359       text-decoration: underline;
3360       color: lighten($ui-highlight-color, 12%);
3361     }
3362   }
3363 }
3364
3365 .regeneration-indicator {
3366   text-align: center;
3367   font-size: 16px;
3368   font-weight: 500;
3369   color: $dark-text-color;
3370   background: $ui-base-color;
3371   cursor: default;
3372   display: flex;
3373   flex: 1 1 auto;
3374   flex-direction: column;
3375   align-items: center;
3376   justify-content: center;
3377   padding: 20px;
3378
3379   &__figure {
3380     &,
3381     img {
3382       display: block;
3383       width: auto;
3384       height: 160px;
3385       margin: 0;
3386     }
3387   }
3388
3389   &--without-header {
3390     padding-top: 20px + 48px;
3391   }
3392
3393   &__label {
3394     margin-top: 30px;
3395
3396     strong {
3397       display: block;
3398       margin-bottom: 10px;
3399       color: $dark-text-color;
3400     }
3401
3402     span {
3403       font-size: 15px;
3404       font-weight: 400;
3405     }
3406   }
3407 }
3408
3409 .column-header__wrapper {
3410   position: relative;
3411   flex: 0 0 auto;
3412   z-index: 1;
3413
3414   &.active {
3415     box-shadow: 0 1px 0 rgba($highlight-text-color, 0.3);
3416
3417     &::before {
3418       display: block;
3419       content: "";
3420       position: absolute;
3421       bottom: -13px;
3422       left: 0;
3423       right: 0;
3424       margin: 0 auto;
3425       width: 60%;
3426       pointer-events: none;
3427       height: 28px;
3428       z-index: 1;
3429       background: radial-gradient(ellipse, rgba($ui-highlight-color, 0.23) 0%, rgba($ui-highlight-color, 0) 60%);
3430     }
3431   }
3432
3433   .announcements {
3434     z-index: 1;
3435     position: relative;
3436   }
3437 }
3438
3439 .column-header {
3440   display: flex;
3441   font-size: 16px;
3442   background: lighten($ui-base-color, 4%);
3443   flex: 0 0 auto;
3444   cursor: pointer;
3445   position: relative;
3446   z-index: 2;
3447   outline: 0;
3448   overflow: hidden;
3449
3450   & > button {
3451     margin: 0;
3452     border: 0;
3453     padding: 15px 0 15px 15px;
3454     color: inherit;
3455     background: transparent;
3456     font: inherit;
3457     text-align: left;
3458     text-overflow: ellipsis;
3459     overflow: hidden;
3460     white-space: nowrap;
3461     flex: 1;
3462   }
3463
3464   & > .column-header__back-button {
3465     color: $highlight-text-color;
3466   }
3467
3468   &.active {
3469     .column-header__icon {
3470       color: $highlight-text-color;
3471       text-shadow: 0 0 10px rgba($highlight-text-color, 0.4);
3472     }
3473   }
3474
3475   &:focus,
3476   &:active {
3477     outline: 0;
3478   }
3479 }
3480
3481 .column-header__buttons {
3482   height: 48px;
3483   display: flex;
3484 }
3485
3486 .column-header__links {
3487   margin-bottom: 14px;
3488 }
3489
3490 .column-header__links .text-btn {
3491   margin-right: 10px;
3492 }
3493
3494 .column-header__button {
3495   background: lighten($ui-base-color, 4%);
3496   border: 0;
3497   color: $darker-text-color;
3498   cursor: pointer;
3499   font-size: 16px;
3500   padding: 0 15px;
3501
3502   &:hover {
3503     color: lighten($darker-text-color, 7%);
3504   }
3505
3506   &.active {
3507     color: $primary-text-color;
3508     background: lighten($ui-base-color, 8%);
3509
3510     &:hover {
3511       color: $primary-text-color;
3512       background: lighten($ui-base-color, 8%);
3513     }
3514   }
3515 }
3516
3517 .column-header__collapsible {
3518   max-height: 70vh;
3519   overflow: hidden;
3520   overflow-y: auto;
3521   color: $darker-text-color;
3522   transition: max-height 150ms ease-in-out, opacity 300ms linear;
3523   opacity: 1;
3524   z-index: 1;
3525   position: relative;
3526
3527   &.collapsed {
3528     max-height: 0;
3529     opacity: 0.5;
3530   }
3531
3532   &.animating {
3533     overflow-y: hidden;
3534   }
3535
3536   hr {
3537     height: 0;
3538     background: transparent;
3539     border: 0;
3540     border-top: 1px solid lighten($ui-base-color, 12%);
3541     margin: 10px 0;
3542   }
3543 }
3544
3545 .column-header__collapsible-inner {
3546   background: lighten($ui-base-color, 8%);
3547   padding: 15px;
3548 }
3549
3550 .column-header__setting-btn {
3551   &:hover,
3552   &:focus {
3553     color: $darker-text-color;
3554     text-decoration: underline;
3555   }
3556 }
3557
3558 .column-header__collapsible__extra + .column-header__setting-btn {
3559   padding-top: 5px;
3560 }
3561
3562 .column-header__permission-btn {
3563   display: inline;
3564   font-weight: inherit;
3565   text-decoration: underline;
3566 }
3567
3568 .column-header__setting-arrows {
3569   float: right;
3570
3571   .column-header__setting-btn {
3572     padding: 5px;
3573
3574     &:first-child {
3575       padding-right: 7px;
3576     }
3577
3578     &:last-child {
3579       padding-left: 7px;
3580       margin-left: 5px;
3581     }
3582   }
3583 }
3584
3585 .text-btn {
3586   display: inline-block;
3587   padding: 0;
3588   font-family: inherit;
3589   font-size: inherit;
3590   color: inherit;
3591   border: 0;
3592   background: transparent;
3593   cursor: pointer;
3594 }
3595
3596 .column-header__issue-btn {
3597   color: $warning-red;
3598
3599   &:hover {
3600     color: $error-red;
3601     text-decoration: underline;
3602   }
3603 }
3604
3605 .column-header__icon {
3606   display: inline-block;
3607   margin-right: 5px;
3608 }
3609
3610 .loading-indicator {
3611   color: $dark-text-color;
3612   font-size: 12px;
3613   font-weight: 400;
3614   text-transform: uppercase;
3615   overflow: visible;
3616   position: absolute;
3617   top: 50%;
3618   left: 50%;
3619   transform: translate(-50%, -50%);
3620
3621   span {
3622     display: block;
3623     float: left;
3624     transform: translateX(-50%);
3625     margin: 82px 0 0 50%;
3626     white-space: nowrap;
3627   }
3628 }
3629
3630 .loading-indicator__figure {
3631   position: absolute;
3632   top: 50%;
3633   left: 50%;
3634   transform: translate(-50%, -50%);
3635   width: 42px;
3636   height: 42px;
3637   box-sizing: border-box;
3638   background-color: transparent;
3639   border: 0 solid lighten($ui-base-color, 26%);
3640   border-width: 6px;
3641   border-radius: 50%;
3642 }
3643
3644 .no-reduce-motion .loading-indicator span {
3645   animation: loader-label 1.15s infinite cubic-bezier(0.215, 0.61, 0.355, 1);
3646 }
3647
3648 .no-reduce-motion .loading-indicator__figure {
3649   animation: loader-figure 1.15s infinite cubic-bezier(0.215, 0.61, 0.355, 1);
3650 }
3651
3652 @keyframes spring-rotate-in {
3653   0% {
3654     transform: rotate(0deg);
3655   }
3656
3657   30% {
3658     transform: rotate(-484.8deg);
3659   }
3660
3661   60% {
3662     transform: rotate(-316.7deg);
3663   }
3664
3665   90% {
3666     transform: rotate(-375deg);
3667   }
3668
3669   100% {
3670     transform: rotate(-360deg);
3671   }
3672 }
3673
3674 @keyframes spring-rotate-out {
3675   0% {
3676     transform: rotate(-360deg);
3677   }
3678
3679   30% {
3680     transform: rotate(124.8deg);
3681   }
3682
3683   60% {
3684     transform: rotate(-43.27deg);
3685   }
3686
3687   90% {
3688     transform: rotate(15deg);
3689   }
3690
3691   100% {
3692     transform: rotate(0deg);
3693   }
3694 }
3695
3696 @keyframes loader-figure {
3697   0% {
3698     width: 0;
3699     height: 0;
3700     background-color: lighten($ui-base-color, 26%);
3701   }
3702
3703   29% {
3704     background-color: lighten($ui-base-color, 26%);
3705   }
3706
3707   30% {
3708     width: 42px;
3709     height: 42px;
3710     background-color: transparent;
3711     border-width: 21px;
3712     opacity: 1;
3713   }
3714
3715   100% {
3716     width: 42px;
3717     height: 42px;
3718     border-width: 0;
3719     opacity: 0;
3720     background-color: transparent;
3721   }
3722 }
3723
3724 @keyframes loader-label {
3725   0% { opacity: 0.25; }
3726   30% { opacity: 1; }
3727   100% { opacity: 0.25; }
3728 }
3729
3730 .video-error-cover {
3731   align-items: center;
3732   background: $base-overlay-background;
3733   color: $primary-text-color;
3734   cursor: pointer;
3735   display: flex;
3736   flex-direction: column;
3737   height: 100%;
3738   justify-content: center;
3739   margin-top: 8px;
3740   position: relative;
3741   text-align: center;
3742   z-index: 100;
3743 }
3744
3745 .media-spoiler {
3746   background: $base-overlay-background;
3747   color: $darker-text-color;
3748   border: 0;
3749   padding: 0;
3750   width: 100%;
3751   height: 100%;
3752   border-radius: 4px;
3753   appearance: none;
3754
3755   &:hover,
3756   &:active,
3757   &:focus {
3758     padding: 0;
3759     color: lighten($darker-text-color, 8%);
3760   }
3761 }
3762
3763 .media-spoiler__warning {
3764   display: block;
3765   font-size: 14px;
3766 }
3767
3768 .media-spoiler__trigger {
3769   display: block;
3770   font-size: 11px;
3771   font-weight: 700;
3772 }
3773
3774 .spoiler-button {
3775   top: 0;
3776   left: 0;
3777   width: 100%;
3778   height: 100%;
3779   position: absolute;
3780   z-index: 100;
3781
3782   &--minified {
3783     display: block;
3784     left: 4px;
3785     top: 4px;
3786     width: auto;
3787     height: auto;
3788   }
3789
3790   &--click-thru {
3791     pointer-events: none;
3792   }
3793
3794   &--hidden {
3795     display: none;
3796   }
3797
3798   &__overlay {
3799     display: block;
3800     background: transparent;
3801     width: 100%;
3802     height: 100%;
3803     border: 0;
3804
3805     &__label {
3806       display: inline-block;
3807       background: rgba($base-overlay-background, 0.5);
3808       border-radius: 8px;
3809       padding: 8px 12px;
3810       color: $primary-text-color;
3811       font-weight: 500;
3812       font-size: 14px;
3813     }
3814
3815     &:hover,
3816     &:focus,
3817     &:active {
3818       .spoiler-button__overlay__label {
3819         background: rgba($base-overlay-background, 0.8);
3820       }
3821     }
3822
3823     &:disabled {
3824       .spoiler-button__overlay__label {
3825         background: rgba($base-overlay-background, 0.5);
3826       }
3827     }
3828   }
3829 }
3830
3831 .modal-container--preloader {
3832   background: lighten($ui-base-color, 8%);
3833 }
3834
3835 .account--panel {
3836   background: lighten($ui-base-color, 4%);
3837   border-top: 1px solid lighten($ui-base-color, 8%);
3838   border-bottom: 1px solid lighten($ui-base-color, 8%);
3839   display: flex;
3840   flex-direction: row;
3841   padding: 10px 0;
3842 }
3843
3844 .account--panel__button,
3845 .detailed-status__button {
3846   flex: 1 1 auto;
3847   text-align: center;
3848 }
3849
3850 .column-settings__outer {
3851   background: lighten($ui-base-color, 8%);
3852   padding: 15px;
3853 }
3854
3855 .column-settings__section {
3856   color: $darker-text-color;
3857   cursor: default;
3858   display: block;
3859   font-weight: 500;
3860   margin-bottom: 10px;
3861 }
3862
3863 .column-settings__row--with-margin {
3864   margin-bottom: 15px;
3865 }
3866
3867 .column-settings__hashtags {
3868   .column-settings__row {
3869     margin-bottom: 15px;
3870   }
3871
3872   .column-select {
3873     &__control {
3874       @include search-input;
3875
3876       &::placeholder {
3877         color: lighten($darker-text-color, 4%);
3878       }
3879
3880       &::-moz-focus-inner {
3881         border: 0;
3882       }
3883
3884       &::-moz-focus-inner,
3885       &:focus,
3886       &:active {
3887         outline: 0 !important;
3888       }
3889
3890       &:focus {
3891         background: lighten($ui-base-color, 4%);
3892       }
3893
3894       @media screen and (max-width: 600px) {
3895         font-size: 16px;
3896       }
3897     }
3898
3899     &__placeholder {
3900       color: $dark-text-color;
3901       padding-left: 2px;
3902       font-size: 12px;
3903     }
3904
3905     &__value-container {
3906       padding-left: 6px;
3907     }
3908
3909     &__multi-value {
3910       background: lighten($ui-base-color, 8%);
3911
3912       &__remove {
3913         cursor: pointer;
3914
3915         &:hover,
3916         &:active,
3917         &:focus {
3918           background: lighten($ui-base-color, 12%);
3919           color: lighten($darker-text-color, 4%);
3920         }
3921       }
3922     }
3923
3924     &__multi-value__label,
3925     &__input {
3926       color: $darker-text-color;
3927     }
3928
3929     &__clear-indicator,
3930     &__dropdown-indicator {
3931       cursor: pointer;
3932       transition: none;
3933       color: $dark-text-color;
3934
3935       &:hover,
3936       &:active,
3937       &:focus {
3938         color: lighten($dark-text-color, 4%);
3939       }
3940     }
3941
3942     &__indicator-separator {
3943       background-color: lighten($ui-base-color, 8%);
3944     }
3945
3946     &__menu {
3947       @include search-popout;
3948       padding: 0;
3949       background: $ui-secondary-color;
3950     }
3951
3952     &__menu-list {
3953       padding: 6px;
3954     }
3955
3956     &__option {
3957       color: $inverted-text-color;
3958       border-radius: 4px;
3959       font-size: 14px;
3960
3961       &--is-focused,
3962       &--is-selected {
3963         background: darken($ui-secondary-color, 10%);
3964       }
3965     }
3966   }
3967 }
3968
3969 .column-settings__row {
3970   .text-btn:not(.column-header__permission-btn) {
3971     margin-bottom: 15px;
3972   }
3973 }
3974
3975 .relationship-tag {
3976   color: $primary-text-color;
3977   margin-bottom: 4px;
3978   display: block;
3979   background-color: $base-overlay-background;
3980   text-transform: uppercase;
3981   font-size: 11px;
3982   font-weight: 500;
3983   padding: 4px;
3984   border-radius: 4px;
3985   opacity: 0.7;
3986
3987   &:hover {
3988     opacity: 1;
3989   }
3990 }
3991
3992 .setting-toggle {
3993   display: block;
3994   line-height: 24px;
3995 }
3996
3997 .setting-toggle__label {
3998   color: $darker-text-color;
3999   display: inline-block;
4000   margin-bottom: 14px;
4001   margin-left: 8px;
4002   vertical-align: middle;
4003 }
4004
4005 .empty-column-indicator,
4006 .error-column,
4007 .follow_requests-unlocked_explanation {
4008   color: $dark-text-color;
4009   background: $ui-base-color;
4010   text-align: center;
4011   padding: 20px;
4012   font-size: 15px;
4013   font-weight: 400;
4014   cursor: default;
4015   display: flex;
4016   flex: 1 1 auto;
4017   align-items: center;
4018   justify-content: center;
4019
4020   @supports(display: grid) { // hack to fix Chrome <57
4021     contain: strict;
4022   }
4023
4024   & > span {
4025     max-width: 400px;
4026   }
4027
4028   a {
4029     color: $highlight-text-color;
4030     text-decoration: none;
4031
4032     &:hover {
4033       text-decoration: underline;
4034     }
4035   }
4036 }
4037
4038 .follow_requests-unlocked_explanation {
4039   background: darken($ui-base-color, 4%);
4040   contain: initial;
4041 }
4042
4043 .error-column {
4044   flex-direction: column;
4045 }
4046
4047 @keyframes heartbeat {
4048   from {
4049     transform: scale(1);
4050     animation-timing-function: ease-out;
4051   }
4052
4053   10% {
4054     transform: scale(0.91);
4055     animation-timing-function: ease-in;
4056   }
4057
4058   17% {
4059     transform: scale(0.98);
4060     animation-timing-function: ease-out;
4061   }
4062
4063   33% {
4064     transform: scale(0.87);
4065     animation-timing-function: ease-in;
4066   }
4067
4068   45% {
4069     transform: scale(1);
4070     animation-timing-function: ease-out;
4071   }
4072 }
4073
4074 .no-reduce-motion .pulse-loading {
4075   transform-origin: center center;
4076   animation: heartbeat 1.5s ease-in-out infinite both;
4077 }
4078
4079 @keyframes shake-bottom {
4080   0%,
4081   100% {
4082     transform: rotate(0deg);
4083     transform-origin: 50% 100%;
4084   }
4085
4086   10% {
4087     transform: rotate(2deg);
4088   }
4089
4090   20%,
4091   40%,
4092   60% {
4093     transform: rotate(-4deg);
4094   }
4095
4096   30%,
4097   50%,
4098   70% {
4099     transform: rotate(4deg);
4100   }
4101
4102   80% {
4103     transform: rotate(-2deg);
4104   }
4105
4106   90% {
4107     transform: rotate(2deg);
4108   }
4109 }
4110
4111 .no-reduce-motion .shake-bottom {
4112   transform-origin: 50% 100%;
4113   animation: shake-bottom 0.8s cubic-bezier(0.455, 0.03, 0.515, 0.955) 2s 2 both;
4114 }
4115
4116 .emoji-picker-dropdown__menu {
4117   background: $simple-background-color;
4118   position: absolute;
4119   box-shadow: 4px 4px 6px rgba($base-shadow-color, 0.4);
4120   border-radius: 4px;
4121   margin-top: 5px;
4122   z-index: 2;
4123
4124   .emoji-mart-scroll {
4125     transition: opacity 200ms ease;
4126   }
4127
4128   &.selecting .emoji-mart-scroll {
4129     opacity: 0.5;
4130   }
4131 }
4132
4133 .emoji-picker-dropdown__modifiers {
4134   position: absolute;
4135   top: 60px;
4136   right: 11px;
4137   cursor: pointer;
4138 }
4139
4140 .emoji-picker-dropdown__modifiers__menu {
4141   position: absolute;
4142   z-index: 4;
4143   top: -4px;
4144   left: -8px;
4145   background: $simple-background-color;
4146   border-radius: 4px;
4147   box-shadow: 1px 2px 6px rgba($base-shadow-color, 0.2);
4148   overflow: hidden;
4149
4150   button {
4151     display: block;
4152     cursor: pointer;
4153     border: 0;
4154     padding: 4px 8px;
4155     background: transparent;
4156
4157     &:hover,
4158     &:focus,
4159     &:active {
4160       background: rgba($ui-secondary-color, 0.4);
4161     }
4162   }
4163
4164   .emoji-mart-emoji {
4165     height: 22px;
4166   }
4167 }
4168
4169 .emoji-mart-emoji {
4170   span {
4171     background-repeat: no-repeat;
4172   }
4173 }
4174
4175 .upload-area {
4176   align-items: center;
4177   background: rgba($base-overlay-background, 0.8);
4178   display: flex;
4179   height: 100%;
4180   justify-content: center;
4181   left: 0;
4182   opacity: 0;
4183   position: absolute;
4184   top: 0;
4185   visibility: hidden;
4186   width: 100%;
4187   z-index: 2000;
4188
4189   * {
4190     pointer-events: none;
4191   }
4192 }
4193
4194 .upload-area__drop {
4195   width: 320px;
4196   height: 160px;
4197   display: flex;
4198   box-sizing: border-box;
4199   position: relative;
4200   padding: 8px;
4201 }
4202
4203 .upload-area__background {
4204   position: absolute;
4205   top: 0;
4206   right: 0;
4207   bottom: 0;
4208   left: 0;
4209   z-index: -1;
4210   border-radius: 4px;
4211   background: $ui-base-color;
4212   box-shadow: 0 0 5px rgba($base-shadow-color, 0.2);
4213 }
4214
4215 .upload-area__content {
4216   flex: 1;
4217   display: flex;
4218   align-items: center;
4219   justify-content: center;
4220   color: $secondary-text-color;
4221   font-size: 18px;
4222   font-weight: 500;
4223   border: 2px dashed $ui-base-lighter-color;
4224   border-radius: 4px;
4225 }
4226
4227 .upload-progress {
4228   padding: 10px;
4229   color: $lighter-text-color;
4230   overflow: hidden;
4231   display: flex;
4232
4233   .fa {
4234     font-size: 34px;
4235     margin-right: 10px;
4236   }
4237
4238   span {
4239     font-size: 12px;
4240     text-transform: uppercase;
4241     font-weight: 500;
4242     display: block;
4243   }
4244 }
4245
4246 .upload-progess__message {
4247   flex: 1 1 auto;
4248 }
4249
4250 .upload-progress__backdrop {
4251   width: 100%;
4252   height: 6px;
4253   border-radius: 6px;
4254   background: $ui-base-lighter-color;
4255   position: relative;
4256   margin-top: 5px;
4257 }
4258
4259 .upload-progress__tracker {
4260   position: absolute;
4261   left: 0;
4262   top: 0;
4263   height: 6px;
4264   background: $ui-highlight-color;
4265   border-radius: 6px;
4266 }
4267
4268 .emoji-button {
4269   display: block;
4270   padding: 5px 5px 2px 2px;
4271   outline: 0;
4272   cursor: pointer;
4273
4274   &:active,
4275   &:focus {
4276     outline: 0 !important;
4277   }
4278
4279   img {
4280     filter: grayscale(100%);
4281     opacity: 0.8;
4282     display: block;
4283     margin: 0;
4284     width: 22px;
4285     height: 22px;
4286   }
4287
4288   &:hover,
4289   &:active,
4290   &:focus {
4291     img {
4292       opacity: 1;
4293       filter: none;
4294     }
4295   }
4296 }
4297
4298 .dropdown--active .emoji-button img {
4299   opacity: 1;
4300   filter: none;
4301 }
4302
4303 .privacy-dropdown__dropdown {
4304   position: absolute;
4305   background: $simple-background-color;
4306   box-shadow: 2px 4px 15px rgba($base-shadow-color, 0.4);
4307   border-radius: 4px;
4308   margin-left: 40px;
4309   overflow: hidden;
4310   z-index: 2;
4311
4312   &.top {
4313     transform-origin: 50% 100%;
4314   }
4315
4316   &.bottom {
4317     transform-origin: 50% 0;
4318   }
4319 }
4320
4321 .modal-root__container .privacy-dropdown {
4322   flex-grow: 0;
4323 }
4324
4325 .modal-root__container .privacy-dropdown__dropdown {
4326   pointer-events: auto;
4327   z-index: 9999;
4328 }
4329
4330 .privacy-dropdown__option {
4331   color: $inverted-text-color;
4332   padding: 10px;
4333   cursor: pointer;
4334   display: flex;
4335
4336   &:hover,
4337   &.active {
4338     background: $ui-highlight-color;
4339     color: $primary-text-color;
4340     outline: 0;
4341
4342     .privacy-dropdown__option__content {
4343       color: $primary-text-color;
4344
4345       strong {
4346         color: $primary-text-color;
4347       }
4348     }
4349   }
4350
4351   &.active:hover {
4352     background: lighten($ui-highlight-color, 4%);
4353   }
4354 }
4355
4356 .privacy-dropdown__option__icon {
4357   display: flex;
4358   align-items: center;
4359   justify-content: center;
4360   margin-right: 10px;
4361 }
4362
4363 .privacy-dropdown__option__content {
4364   flex: 1 1 auto;
4365   color: $lighter-text-color;
4366
4367   strong {
4368     font-weight: 500;
4369     display: block;
4370     color: $inverted-text-color;
4371
4372     @each $lang in $cjk-langs {
4373       &:lang(#{$lang}) {
4374         font-weight: 700;
4375       }
4376     }
4377   }
4378 }
4379
4380 .privacy-dropdown.active {
4381   .privacy-dropdown__value {
4382     background: $simple-background-color;
4383     border-radius: 4px 4px 0 0;
4384     box-shadow: 0 -4px 4px rgba($base-shadow-color, 0.1);
4385
4386     .icon-button {
4387       transition: none;
4388     }
4389
4390     &.active {
4391       background: $ui-highlight-color;
4392
4393       .icon-button {
4394         color: $primary-text-color;
4395       }
4396     }
4397   }
4398
4399   &.top .privacy-dropdown__value {
4400     border-radius: 0 0 4px 4px;
4401   }
4402
4403   .privacy-dropdown__dropdown {
4404     display: block;
4405     box-shadow: 2px 4px 6px rgba($base-shadow-color, 0.1);
4406   }
4407 }
4408
4409 .search {
4410   position: relative;
4411 }
4412
4413 .search__input {
4414   @include search-input;
4415
4416   display: block;
4417   padding: 15px;
4418   padding-right: 30px;
4419   line-height: 18px;
4420   font-size: 16px;
4421
4422   &::placeholder {
4423     color: lighten($darker-text-color, 4%);
4424   }
4425
4426   &::-moz-focus-inner {
4427     border: 0;
4428   }
4429
4430   &::-moz-focus-inner,
4431   &:focus,
4432   &:active {
4433     outline: 0 !important;
4434   }
4435
4436   &:focus {
4437     background: lighten($ui-base-color, 4%);
4438   }
4439
4440   @media screen and (max-width: 600px) {
4441     font-size: 16px;
4442   }
4443 }
4444
4445 .search__icon {
4446   &::-moz-focus-inner {
4447     border: 0;
4448   }
4449
4450   &::-moz-focus-inner,
4451   &:focus {
4452     outline: 0 !important;
4453   }
4454
4455   .fa {
4456     position: absolute;
4457     top: 16px;
4458     right: 10px;
4459     z-index: 2;
4460     display: inline-block;
4461     opacity: 0;
4462     transition: all 100ms linear;
4463     transition-property: transform, opacity;
4464     font-size: 18px;
4465     width: 18px;
4466     height: 18px;
4467     color: $secondary-text-color;
4468     cursor: default;
4469     pointer-events: none;
4470
4471     &.active {
4472       pointer-events: auto;
4473       opacity: 0.3;
4474     }
4475   }
4476
4477   .fa-search {
4478     transform: rotate(90deg);
4479
4480     &.active {
4481       pointer-events: none;
4482       transform: rotate(0deg);
4483     }
4484   }
4485
4486   .fa-times-circle {
4487     top: 17px;
4488     transform: rotate(0deg);
4489     color: $action-button-color;
4490     cursor: pointer;
4491
4492     &.active {
4493       transform: rotate(90deg);
4494     }
4495
4496     &:hover {
4497       color: lighten($action-button-color, 7%);
4498     }
4499   }
4500 }
4501
4502 .search-results__header {
4503   color: $dark-text-color;
4504   background: lighten($ui-base-color, 2%);
4505   padding: 15px;
4506   font-weight: 500;
4507   font-size: 16px;
4508   cursor: default;
4509
4510   .fa {
4511     display: inline-block;
4512     margin-right: 5px;
4513   }
4514 }
4515
4516 .search-results__section {
4517   margin-bottom: 5px;
4518
4519   h5 {
4520     background: darken($ui-base-color, 4%);
4521     border-bottom: 1px solid lighten($ui-base-color, 8%);
4522     cursor: default;
4523     display: flex;
4524     padding: 15px;
4525     font-weight: 500;
4526     font-size: 16px;
4527     color: $dark-text-color;
4528
4529     .fa {
4530       display: inline-block;
4531       margin-right: 5px;
4532     }
4533   }
4534
4535   .account:last-child,
4536   & > div:last-child .status {
4537     border-bottom: 0;
4538   }
4539 }
4540
4541 .search-results__hashtag {
4542   display: block;
4543   padding: 10px;
4544   color: $secondary-text-color;
4545   text-decoration: none;
4546
4547   &:hover,
4548   &:active,
4549   &:focus {
4550     color: lighten($secondary-text-color, 4%);
4551     text-decoration: underline;
4552   }
4553 }
4554
4555 .search-results__info {
4556   padding: 20px;
4557   color: $darker-text-color;
4558   text-align: center;
4559 }
4560
4561 .modal-root {
4562   position: relative;
4563   z-index: 9999;
4564 }
4565
4566 .modal-root__overlay {
4567   position: fixed;
4568   top: 0;
4569   left: 0;
4570   right: 0;
4571   bottom: 0;
4572   background: rgba($base-overlay-background, 0.7);
4573   transition: background 0.5s;
4574 }
4575
4576 .modal-root__container {
4577   position: fixed;
4578   top: 0;
4579   left: 0;
4580   width: 100%;
4581   height: 100%;
4582   display: flex;
4583   flex-direction: column;
4584   align-items: center;
4585   justify-content: center;
4586   align-content: space-around;
4587   z-index: 9999;
4588   pointer-events: none;
4589   user-select: none;
4590 }
4591
4592 .modal-root__modal {
4593   pointer-events: auto;
4594   display: flex;
4595   z-index: 9999;
4596 }
4597
4598 .video-modal__container {
4599   max-width: 100vw;
4600   max-height: 100vh;
4601 }
4602
4603 .audio-modal__container {
4604   width: 50vw;
4605 }
4606
4607 .media-modal {
4608   width: 100%;
4609   height: 100%;
4610   position: relative;
4611
4612   &__close,
4613   &__zoom-button {
4614     color: rgba($white, 0.7);
4615
4616     &:hover,
4617     &:focus,
4618     &:active {
4619       color: $white;
4620       background-color: rgba($white, 0.15);
4621     }
4622
4623     &:focus {
4624       background-color: rgba($white, 0.3);
4625     }
4626   }
4627 }
4628
4629 .media-modal__closer {
4630   position: absolute;
4631   top: 0;
4632   left: 0;
4633   right: 0;
4634   bottom: 0;
4635 }
4636
4637 .media-modal__navigation {
4638   position: absolute;
4639   top: 0;
4640   left: 0;
4641   right: 0;
4642   bottom: 0;
4643   pointer-events: none;
4644   transition: opacity 0.3s linear;
4645   will-change: opacity;
4646
4647   * {
4648     pointer-events: auto;
4649   }
4650
4651   &.media-modal__navigation--hidden {
4652     opacity: 0;
4653
4654     * {
4655       pointer-events: none;
4656     }
4657   }
4658 }
4659
4660 .media-modal__nav {
4661   background: transparent;
4662   box-sizing: border-box;
4663   border: 0;
4664   color: rgba($primary-text-color, 0.7);
4665   cursor: pointer;
4666   display: flex;
4667   align-items: center;
4668   font-size: 24px;
4669   height: 20vmax;
4670   margin: auto 0;
4671   padding: 30px 15px;
4672   position: absolute;
4673   top: 0;
4674   bottom: 0;
4675
4676   &:hover,
4677   &:focus,
4678   &:active {
4679     color: $primary-text-color;
4680   }
4681 }
4682
4683 .media-modal__nav--left {
4684   left: 0;
4685 }
4686
4687 .media-modal__nav--right {
4688   right: 0;
4689 }
4690
4691 .media-modal__overlay {
4692   max-width: 600px;
4693   position: absolute;
4694   left: 0;
4695   right: 0;
4696   bottom: 0;
4697   margin: 0 auto;
4698
4699   .picture-in-picture__footer {
4700     border-radius: 0;
4701     background: transparent;
4702     padding: 20px 0;
4703
4704     .icon-button {
4705       color: $white;
4706
4707       &:hover,
4708       &:focus,
4709       &:active {
4710         color: $white;
4711         background-color: rgba($white, 0.15);
4712       }
4713
4714       &:focus {
4715         background-color: rgba($white, 0.3);
4716       }
4717
4718       &.active {
4719         color: $highlight-text-color;
4720
4721         &:hover,
4722         &:focus,
4723         &:active {
4724           background: rgba($highlight-text-color, 0.15);
4725         }
4726
4727         &:focus {
4728           background: rgba($highlight-text-color, 0.3);
4729         }
4730       }
4731
4732       &.star-icon.active {
4733         color: $gold-star;
4734
4735         &:hover,
4736         &:focus,
4737         &:active {
4738           background: rgba($gold-star, 0.15);
4739         }
4740
4741         &:focus {
4742           background: rgba($gold-star, 0.3);
4743         }
4744       }
4745
4746       &.disabled {
4747         color: $white;
4748         background-color: transparent;
4749         cursor: default;
4750         opacity: 0.4;
4751       }
4752     }
4753   }
4754 }
4755
4756 .media-modal__pagination {
4757   display: flex;
4758   justify-content: center;
4759   margin-bottom: 20px;
4760 }
4761
4762 .media-modal__page-dot {
4763   flex: 0 0 auto;
4764   background-color: $white;
4765   opacity: 0.4;
4766   height: 6px;
4767   width: 6px;
4768   border-radius: 50%;
4769   margin: 0 4px;
4770   padding: 0;
4771   border: 0;
4772   font-size: 0;
4773   transition: opacity .2s ease-in-out;
4774
4775   &.active {
4776     opacity: 1;
4777   }
4778 }
4779
4780 .media-modal__close {
4781   position: absolute;
4782   right: 8px;
4783   top: 8px;
4784   z-index: 100;
4785 }
4786
4787 .media-modal__zoom-button {
4788   position: absolute;
4789   right: 64px;
4790   top: 8px;
4791   z-index: 100;
4792   pointer-events: auto;
4793   transition: opacity 0.3s linear;
4794   will-change: opacity;
4795 }
4796
4797 .media-modal__zoom-button--hidden {
4798   pointer-events: none;
4799   opacity: 0;
4800 }
4801
4802 .onboarding-modal,
4803 .error-modal,
4804 .embed-modal {
4805   background: $ui-secondary-color;
4806   color: $inverted-text-color;
4807   border-radius: 8px;
4808   overflow: hidden;
4809   display: flex;
4810   flex-direction: column;
4811 }
4812
4813 .error-modal__body {
4814   height: 80vh;
4815   width: 80vw;
4816   max-width: 520px;
4817   max-height: 420px;
4818   position: relative;
4819
4820   & > div {
4821     position: absolute;
4822     top: 0;
4823     left: 0;
4824     width: 100%;
4825     height: 100%;
4826     box-sizing: border-box;
4827     padding: 25px;
4828     display: none;
4829     flex-direction: column;
4830     align-items: center;
4831     justify-content: center;
4832     display: flex;
4833     opacity: 0;
4834     user-select: text;
4835   }
4836 }
4837
4838 .error-modal__body {
4839   display: flex;
4840   flex-direction: column;
4841   justify-content: center;
4842   align-items: center;
4843   text-align: center;
4844 }
4845
4846 .onboarding-modal__paginator,
4847 .error-modal__footer {
4848   flex: 0 0 auto;
4849   background: darken($ui-secondary-color, 8%);
4850   display: flex;
4851   padding: 25px;
4852
4853   & > div {
4854     min-width: 33px;
4855   }
4856
4857   .onboarding-modal__nav,
4858   .error-modal__nav {
4859     color: $lighter-text-color;
4860     border: 0;
4861     font-size: 14px;
4862     font-weight: 500;
4863     padding: 10px 25px;
4864     line-height: inherit;
4865     height: auto;
4866     margin: -10px;
4867     border-radius: 4px;
4868     background-color: transparent;
4869
4870     &:hover,
4871     &:focus,
4872     &:active {
4873       color: darken($lighter-text-color, 4%);
4874       background-color: darken($ui-secondary-color, 16%);
4875     }
4876
4877     &.onboarding-modal__done,
4878     &.onboarding-modal__next {
4879       color: $inverted-text-color;
4880
4881       &:hover,
4882       &:focus,
4883       &:active {
4884         color: lighten($inverted-text-color, 4%);
4885       }
4886     }
4887   }
4888 }
4889
4890 .error-modal__footer {
4891   justify-content: center;
4892 }
4893
4894 .display-case {
4895   text-align: center;
4896   font-size: 15px;
4897   margin-bottom: 15px;
4898
4899   &__label {
4900     font-weight: 500;
4901     color: $inverted-text-color;
4902     margin-bottom: 5px;
4903     text-transform: uppercase;
4904     font-size: 12px;
4905   }
4906
4907   &__case {
4908     background: $ui-base-color;
4909     color: $secondary-text-color;
4910     font-weight: 500;
4911     padding: 10px;
4912     border-radius: 4px;
4913   }
4914 }
4915
4916 .onboard-sliders {
4917   display: inline-block;
4918   max-width: 30px;
4919   max-height: auto;
4920   margin-left: 10px;
4921 }
4922
4923 .boost-modal,
4924 .confirmation-modal,
4925 .report-modal,
4926 .actions-modal,
4927 .mute-modal,
4928 .block-modal {
4929   background: lighten($ui-secondary-color, 8%);
4930   color: $inverted-text-color;
4931   border-radius: 8px;
4932   overflow: hidden;
4933   max-width: 90vw;
4934   width: 480px;
4935   position: relative;
4936   flex-direction: column;
4937
4938   .status__display-name {
4939     display: block;
4940     max-width: 100%;
4941     padding-right: 25px;
4942   }
4943
4944   .status__avatar {
4945     height: 28px;
4946     left: 10px;
4947     position: absolute;
4948     top: 10px;
4949     width: 48px;
4950   }
4951
4952   .status__content__spoiler-link {
4953     color: lighten($secondary-text-color, 8%);
4954   }
4955 }
4956
4957 .actions-modal {
4958   .status {
4959     background: $white;
4960     border-bottom-color: $ui-secondary-color;
4961     padding-top: 10px;
4962     padding-bottom: 10px;
4963   }
4964
4965   .dropdown-menu__separator {
4966     border-bottom-color: $ui-secondary-color;
4967   }
4968 }
4969
4970 .boost-modal__container {
4971   overflow-x: scroll;
4972   padding: 10px;
4973
4974   .status {
4975     user-select: text;
4976     border-bottom: 0;
4977   }
4978 }
4979
4980 .boost-modal__action-bar,
4981 .confirmation-modal__action-bar,
4982 .mute-modal__action-bar,
4983 .block-modal__action-bar {
4984   display: flex;
4985   justify-content: space-between;
4986   background: $ui-secondary-color;
4987   padding: 10px;
4988   line-height: 36px;
4989
4990   & > div {
4991     flex: 1 1 auto;
4992     text-align: right;
4993     color: $lighter-text-color;
4994     padding-right: 10px;
4995   }
4996
4997   .button {
4998     flex: 0 0 auto;
4999   }
5000 }
5001
5002 .boost-modal__status-header {
5003   font-size: 15px;
5004 }
5005
5006 .boost-modal__status-time {
5007   float: right;
5008   font-size: 14px;
5009 }
5010
5011 .mute-modal,
5012 .block-modal {
5013   line-height: 24px;
5014 }
5015
5016 .mute-modal .react-toggle,
5017 .block-modal .react-toggle {
5018   vertical-align: middle;
5019 }
5020
5021 .report-modal {
5022   width: 90vw;
5023   max-width: 700px;
5024 }
5025
5026 .report-modal__container {
5027   display: flex;
5028   border-top: 1px solid $ui-secondary-color;
5029
5030   @media screen and (max-width: 480px) {
5031     flex-wrap: wrap;
5032     overflow-y: auto;
5033   }
5034 }
5035
5036 .report-modal__statuses,
5037 .report-modal__comment {
5038   box-sizing: border-box;
5039   width: 50%;
5040
5041   @media screen and (max-width: 480px) {
5042     width: 100%;
5043   }
5044 }
5045
5046 .report-modal__statuses,
5047 .focal-point-modal__content {
5048   flex: 1 1 auto;
5049   min-height: 20vh;
5050   max-height: 80vh;
5051   overflow-y: auto;
5052   overflow-x: hidden;
5053
5054   .status__content a {
5055     color: $highlight-text-color;
5056   }
5057
5058   .status__content,
5059   .status__content p {
5060     color: $inverted-text-color;
5061   }
5062
5063   @media screen and (max-width: 480px) {
5064     max-height: 10vh;
5065   }
5066 }
5067
5068 .focal-point-modal__content {
5069   @media screen and (max-width: 480px) {
5070     max-height: 40vh;
5071   }
5072 }
5073
5074 .setting-divider {
5075   background: transparent;
5076   border: 0;
5077   margin: 0;
5078   width: 100%;
5079   height: 1px;
5080   margin-bottom: 29px;
5081 }
5082
5083 .report-modal__comment {
5084   padding: 20px;
5085   border-right: 1px solid $ui-secondary-color;
5086   max-width: 320px;
5087
5088   p {
5089     font-size: 14px;
5090     line-height: 20px;
5091     margin-bottom: 20px;
5092   }
5093
5094   .setting-text {
5095     display: block;
5096     box-sizing: border-box;
5097     width: 100%;
5098     margin: 0;
5099     color: $inverted-text-color;
5100     background: $white;
5101     padding: 10px;
5102     font-family: inherit;
5103     font-size: 14px;
5104     resize: none;
5105     border: 0;
5106     outline: 0;
5107     border-radius: 4px;
5108     border: 1px solid $ui-secondary-color;
5109     min-height: 100px;
5110     max-height: 50vh;
5111     margin-bottom: 10px;
5112
5113     &:focus {
5114       border: 1px solid darken($ui-secondary-color, 8%);
5115     }
5116
5117     &__wrapper {
5118       background: $white;
5119       border: 1px solid $ui-secondary-color;
5120       margin-bottom: 10px;
5121       border-radius: 4px;
5122
5123       .setting-text {
5124         border: 0;
5125         margin-bottom: 0;
5126         border-radius: 0;
5127
5128         &:focus {
5129           border: 0;
5130         }
5131       }
5132
5133       &__modifiers {
5134         color: $inverted-text-color;
5135         font-family: inherit;
5136         font-size: 14px;
5137         background: $white;
5138       }
5139     }
5140
5141     &__toolbar {
5142       display: flex;
5143       justify-content: space-between;
5144       margin-bottom: 20px;
5145     }
5146   }
5147
5148   .setting-text-label {
5149     display: block;
5150     color: $inverted-text-color;
5151     font-size: 14px;
5152     font-weight: 500;
5153     margin-bottom: 10px;
5154   }
5155
5156   .setting-toggle {
5157     margin-top: 20px;
5158     margin-bottom: 24px;
5159
5160     &__label {
5161       color: $inverted-text-color;
5162       font-size: 14px;
5163     }
5164   }
5165
5166   @media screen and (max-width: 480px) {
5167     padding: 10px;
5168     max-width: 100%;
5169     order: 2;
5170
5171     .setting-toggle {
5172       margin-bottom: 4px;
5173     }
5174   }
5175 }
5176
5177 .actions-modal {
5178   max-height: 80vh;
5179   max-width: 80vw;
5180
5181   .status {
5182     overflow-y: auto;
5183     max-height: 300px;
5184   }
5185
5186   .actions-modal__item-label {
5187     font-weight: 500;
5188   }
5189
5190   ul {
5191     overflow-y: auto;
5192     flex-shrink: 0;
5193     max-height: 80vh;
5194
5195     &.with-status {
5196       max-height: calc(80vh - 75px);
5197     }
5198
5199     li:empty {
5200       margin: 0;
5201     }
5202
5203     li:not(:empty) {
5204       a {
5205         color: $inverted-text-color;
5206         display: flex;
5207         padding: 12px 16px;
5208         font-size: 15px;
5209         align-items: center;
5210         text-decoration: none;
5211
5212         &,
5213         button {
5214           transition: none;
5215         }
5216
5217         &.active,
5218         &:hover,
5219         &:active,
5220         &:focus {
5221           &,
5222           button {
5223             background: $ui-highlight-color;
5224             color: $primary-text-color;
5225           }
5226         }
5227
5228         button:first-child {
5229           margin-right: 10px;
5230         }
5231       }
5232     }
5233   }
5234 }
5235
5236 .confirmation-modal__action-bar,
5237 .mute-modal__action-bar,
5238 .block-modal__action-bar {
5239   .confirmation-modal__secondary-button {
5240     flex-shrink: 1;
5241   }
5242 }
5243
5244 .confirmation-modal__secondary-button,
5245 .confirmation-modal__cancel-button,
5246 .mute-modal__cancel-button,
5247 .block-modal__cancel-button {
5248   background-color: transparent;
5249   color: $lighter-text-color;
5250   font-size: 14px;
5251   font-weight: 500;
5252
5253   &:hover,
5254   &:focus,
5255   &:active {
5256     color: darken($lighter-text-color, 4%);
5257     background-color: transparent;
5258   }
5259 }
5260
5261 .confirmation-modal__container,
5262 .mute-modal__container,
5263 .block-modal__container,
5264 .report-modal__target {
5265   padding: 30px;
5266   font-size: 16px;
5267
5268   strong {
5269     font-weight: 500;
5270
5271     @each $lang in $cjk-langs {
5272       &:lang(#{$lang}) {
5273         font-weight: 700;
5274       }
5275     }
5276   }
5277
5278   select {
5279     appearance: none;
5280     box-sizing: border-box;
5281     font-size: 14px;
5282     color: $inverted-text-color;
5283     display: inline-block;
5284     width: auto;
5285     outline: 0;
5286     font-family: inherit;
5287     background: $simple-background-color url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 14.933 18.467' height='19.698' width='15.929'><path d='M3.467 14.967l-3.393-3.5H14.86l-3.392 3.5c-1.866 1.925-3.666 3.5-4 3.5-.335 0-2.135-1.575-4-3.5zm.266-11.234L7.467 0 11.2 3.733l3.733 3.734H0l3.733-3.734z' fill='#{hex-color(darken($simple-background-color, 14%))}'/></svg>") no-repeat right 8px center / auto 16px;
5288     border: 1px solid darken($simple-background-color, 14%);
5289     border-radius: 4px;
5290     padding: 6px 10px;
5291     padding-right: 30px;
5292   }
5293 }
5294
5295 .confirmation-modal__container,
5296 .report-modal__target {
5297   text-align: center;
5298 }
5299
5300 .block-modal,
5301 .mute-modal {
5302   &__explanation {
5303     margin-top: 20px;
5304   }
5305
5306   .setting-toggle {
5307     margin-top: 20px;
5308     margin-bottom: 24px;
5309     display: flex;
5310     align-items: center;
5311
5312     &__label {
5313       color: $inverted-text-color;
5314       margin: 0;
5315       margin-left: 8px;
5316     }
5317   }
5318 }
5319
5320 .report-modal__target {
5321   padding: 15px;
5322
5323   .report-modal__close {
5324     position: absolute;
5325     top: 10px;
5326     right: 10px;
5327   }
5328 }
5329
5330 .loading-bar {
5331   background-color: $highlight-text-color;
5332   height: 3px;
5333   position: absolute;
5334   top: 0;
5335   left: 0;
5336   z-index: 9999;
5337 }
5338
5339 .media-gallery__gifv__label {
5340   display: block;
5341   position: absolute;
5342   color: $primary-text-color;
5343   background: rgba($base-overlay-background, 0.5);
5344   bottom: 6px;
5345   left: 6px;
5346   padding: 2px 6px;
5347   border-radius: 2px;
5348   font-size: 11px;
5349   font-weight: 600;
5350   z-index: 1;
5351   pointer-events: none;
5352   opacity: 0.9;
5353   transition: opacity 0.1s ease;
5354   line-height: 18px;
5355 }
5356
5357 .media-gallery__gifv {
5358   &:hover {
5359     .media-gallery__gifv__label {
5360       opacity: 1;
5361     }
5362   }
5363 }
5364
5365 .attachment-list {
5366   display: flex;
5367   font-size: 14px;
5368   border: 1px solid lighten($ui-base-color, 8%);
5369   border-radius: 4px;
5370   margin-top: 14px;
5371   overflow: hidden;
5372
5373   &__icon {
5374     flex: 0 0 auto;
5375     color: $dark-text-color;
5376     padding: 8px 18px;
5377     cursor: default;
5378     border-right: 1px solid lighten($ui-base-color, 8%);
5379     display: flex;
5380     flex-direction: column;
5381     align-items: center;
5382     justify-content: center;
5383     font-size: 26px;
5384
5385     .fa {
5386       display: block;
5387     }
5388   }
5389
5390   &__list {
5391     list-style: none;
5392     padding: 4px 0;
5393     padding-left: 8px;
5394     display: flex;
5395     flex-direction: column;
5396     justify-content: center;
5397
5398     li {
5399       display: block;
5400       padding: 4px 0;
5401     }
5402
5403     a {
5404       text-decoration: none;
5405       color: $dark-text-color;
5406       font-weight: 500;
5407
5408       &:hover {
5409         text-decoration: underline;
5410       }
5411     }
5412   }
5413
5414   &.compact {
5415     border: 0;
5416     margin-top: 4px;
5417
5418     .attachment-list__list {
5419       padding: 0;
5420       display: block;
5421     }
5422
5423     .fa {
5424       color: $dark-text-color;
5425     }
5426   }
5427 }
5428
5429 /* Media Gallery */
5430 .media-gallery {
5431   box-sizing: border-box;
5432   margin-top: 8px;
5433   overflow: hidden;
5434   border-radius: 4px;
5435   position: relative;
5436   width: 100%;
5437   min-height: 64px;
5438 }
5439
5440 .media-gallery__item {
5441   border: 0;
5442   box-sizing: border-box;
5443   display: block;
5444   float: left;
5445   position: relative;
5446   border-radius: 4px;
5447   overflow: hidden;
5448
5449   &.standalone {
5450     .media-gallery__item-gifv-thumbnail {
5451       transform: none;
5452       top: 0;
5453     }
5454   }
5455 }
5456
5457 .media-gallery__item-thumbnail {
5458   cursor: zoom-in;
5459   display: block;
5460   text-decoration: none;
5461   color: $secondary-text-color;
5462   position: relative;
5463   z-index: 1;
5464
5465   &,
5466   img {
5467     height: 100%;
5468     width: 100%;
5469   }
5470
5471   img {
5472     object-fit: cover;
5473   }
5474 }
5475
5476 .media-gallery__preview {
5477   width: 100%;
5478   height: 100%;
5479   object-fit: cover;
5480   position: absolute;
5481   top: 0;
5482   left: 0;
5483   z-index: 0;
5484   background: $base-overlay-background;
5485
5486   &--hidden {
5487     display: none;
5488   }
5489 }
5490
5491 .media-gallery__gifv {
5492   height: 100%;
5493   overflow: hidden;
5494   position: relative;
5495   width: 100%;
5496 }
5497
5498 .media-gallery__item-gifv-thumbnail {
5499   cursor: zoom-in;
5500   height: 100%;
5501   object-fit: cover;
5502   position: relative;
5503   top: 50%;
5504   transform: translateY(-50%);
5505   width: 100%;
5506   z-index: 1;
5507 }
5508
5509 .media-gallery__item-thumbnail-label {
5510   clip: rect(1px 1px 1px 1px); /* IE6, IE7 */
5511   clip: rect(1px, 1px, 1px, 1px);
5512   overflow: hidden;
5513   position: absolute;
5514 }
5515 /* End Media Gallery */
5516
5517 .detailed,
5518 .fullscreen {
5519   .video-player__volume__current,
5520   .video-player__volume::before {
5521     bottom: 27px;
5522   }
5523
5524   .video-player__volume__handle {
5525     bottom: 23px;
5526   }
5527
5528 }
5529
5530 .audio-player {
5531   overflow: hidden;
5532   box-sizing: border-box;
5533   position: relative;
5534   background: darken($ui-base-color, 8%);
5535   border-radius: 4px;
5536   padding-bottom: 44px;
5537   direction: ltr;
5538
5539   &.editable {
5540     border-radius: 0;
5541     height: 100%;
5542   }
5543
5544   .video-player__volume::before,
5545   .video-player__seek::before {
5546     background: currentColor;
5547     opacity: 0.15;
5548   }
5549
5550   .video-player__seek__buffer {
5551     background: currentColor;
5552     opacity: 0.2;
5553   }
5554
5555   .video-player__buttons button,
5556   .video-player__buttons a {
5557     color: currentColor;
5558     opacity: 0.75;
5559
5560     &:active,
5561     &:hover,
5562     &:focus {
5563       color: currentColor;
5564       opacity: 1;
5565     }
5566   }
5567
5568   .video-player__time-sep,
5569   .video-player__time-total,
5570   .video-player__time-current {
5571     color: currentColor;
5572   }
5573
5574   .video-player__seek::before,
5575   .video-player__seek__buffer,
5576   .video-player__seek__progress {
5577     top: 0;
5578   }
5579
5580   .video-player__seek__handle {
5581     top: -4px;
5582   }
5583
5584   .video-player__controls {
5585     padding-top: 10px;
5586     background: transparent;
5587   }
5588 }
5589
5590 .video-player {
5591   overflow: hidden;
5592   position: relative;
5593   background: $base-shadow-color;
5594   max-width: 100%;
5595   border-radius: 4px;
5596   box-sizing: border-box;
5597   direction: ltr;
5598   color: $white;
5599
5600   &.editable {
5601     border-radius: 0;
5602     height: 100% !important;
5603   }
5604
5605   &:focus {
5606     outline: 0;
5607   }
5608
5609   video {
5610     display: block;
5611     max-width: 100vw;
5612     max-height: 80vh;
5613     z-index: 1;
5614   }
5615
5616   &.fullscreen {
5617     width: 100% !important;
5618     height: 100% !important;
5619     margin: 0;
5620
5621     video {
5622       max-width: 100% !important;
5623       max-height: 100% !important;
5624       width: 100% !important;
5625       height: 100% !important;
5626       outline: 0;
5627     }
5628   }
5629
5630   &.inline {
5631     video {
5632       object-fit: contain;
5633       position: relative;
5634       top: 50%;
5635       transform: translateY(-50%);
5636     }
5637   }
5638
5639   &__controls {
5640     position: absolute;
5641     z-index: 2;
5642     bottom: 0;
5643     left: 0;
5644     right: 0;
5645     box-sizing: border-box;
5646     background: linear-gradient(0deg, rgba($base-shadow-color, 0.85) 0, rgba($base-shadow-color, 0.45) 60%, transparent);
5647     padding: 0 15px;
5648     opacity: 0;
5649     transition: opacity .1s ease;
5650
5651     &.active {
5652       opacity: 1;
5653     }
5654   }
5655
5656   &.inactive {
5657     video,
5658     .video-player__controls {
5659       visibility: hidden;
5660     }
5661   }
5662
5663   &__spoiler {
5664     display: none;
5665     position: absolute;
5666     top: 0;
5667     left: 0;
5668     width: 100%;
5669     height: 100%;
5670     z-index: 4;
5671     border: 0;
5672     background: $base-overlay-background;
5673     color: $darker-text-color;
5674     transition: none;
5675     pointer-events: none;
5676
5677     &.active {
5678       display: block;
5679       pointer-events: auto;
5680
5681       &:hover,
5682       &:active,
5683       &:focus {
5684         color: lighten($darker-text-color, 7%);
5685       }
5686     }
5687
5688     &__title {
5689       display: block;
5690       font-size: 14px;
5691     }
5692
5693     &__subtitle {
5694       display: block;
5695       font-size: 11px;
5696       font-weight: 500;
5697     }
5698   }
5699
5700   &__buttons-bar {
5701     display: flex;
5702     justify-content: space-between;
5703     padding-bottom: 8px;
5704     margin: 0 -5px;
5705
5706     .video-player__download__icon {
5707       color: inherit;
5708     }
5709   }
5710
5711   &__buttons {
5712     display: flex;
5713     flex: 0 1 auto;
5714     min-width: 30px;
5715     align-items: center;
5716     font-size: 16px;
5717     white-space: nowrap;
5718     overflow: hidden;
5719     text-overflow: ellipsis;
5720
5721     .player-button {
5722       display: inline-block;
5723       outline: 0;
5724
5725       flex: 0 0 auto;
5726       background: transparent;
5727       padding: 5px;
5728       font-size: 16px;
5729       border: 0;
5730       color: rgba($white, 0.75);
5731
5732       &:active,
5733       &:hover,
5734       &:focus {
5735         color: $white;
5736       }
5737     }
5738   }
5739
5740   &__time {
5741     display: inline;
5742     flex: 0 1 auto;
5743     overflow: hidden;
5744     text-overflow: ellipsis;
5745     margin: 0 5px;
5746   }
5747
5748   &__time-sep,
5749   &__time-total,
5750   &__time-current {
5751     font-size: 14px;
5752     font-weight: 500;
5753   }
5754
5755   &__time-current {
5756     color: $white;
5757   }
5758
5759   &__time-sep {
5760     display: inline-block;
5761     margin: 0 6px;
5762   }
5763
5764   &__time-sep,
5765   &__time-total {
5766     color: $white;
5767   }
5768
5769   &__volume {
5770     flex: 0 0 auto;
5771     display: inline-flex;
5772     cursor: pointer;
5773     height: 24px;
5774     position: relative;
5775     overflow: hidden;
5776
5777     .no-reduce-motion & {
5778       transition: all 100ms linear;
5779     }
5780
5781     &.active {
5782       overflow: visible;
5783       width: 50px;
5784       margin-right: 16px;
5785     }
5786
5787     &::before {
5788       content: "";
5789       width: 50px;
5790       background: rgba($white, 0.35);
5791       border-radius: 4px;
5792       display: block;
5793       position: absolute;
5794       height: 4px;
5795       left: 0;
5796       top: 50%;
5797       transform: translate(0, -50%);
5798     }
5799
5800     &__current {
5801       display: block;
5802       position: absolute;
5803       height: 4px;
5804       border-radius: 4px;
5805       left: 0;
5806       top: 50%;
5807       transform: translate(0, -50%);
5808       background: lighten($ui-highlight-color, 8%);
5809     }
5810
5811     &__handle {
5812       position: absolute;
5813       z-index: 3;
5814       border-radius: 50%;
5815       width: 12px;
5816       height: 12px;
5817       top: 50%;
5818       left: 0;
5819       margin-left: -6px;
5820       transform: translate(0, -50%);
5821       background: lighten($ui-highlight-color, 8%);
5822       box-shadow: 1px 2px 6px rgba($base-shadow-color, 0.2);
5823       opacity: 0;
5824
5825       .no-reduce-motion & {
5826         transition: opacity 100ms linear;
5827       }
5828     }
5829
5830     &.active &__handle {
5831       opacity: 1;
5832     }
5833   }
5834
5835   &__link {
5836     padding: 2px 10px;
5837
5838     a {
5839       text-decoration: none;
5840       font-size: 14px;
5841       font-weight: 500;
5842       color: $white;
5843
5844       &:hover,
5845       &:active,
5846       &:focus {
5847         text-decoration: underline;
5848       }
5849     }
5850   }
5851
5852   &__seek {
5853     cursor: pointer;
5854     height: 24px;
5855     position: relative;
5856
5857     &::before {
5858       content: "";
5859       width: 100%;
5860       background: rgba($white, 0.35);
5861       border-radius: 4px;
5862       display: block;
5863       position: absolute;
5864       height: 4px;
5865       top: 14px;
5866     }
5867
5868     &__progress,
5869     &__buffer {
5870       display: block;
5871       position: absolute;
5872       height: 4px;
5873       border-radius: 4px;
5874       top: 14px;
5875       background: lighten($ui-highlight-color, 8%);
5876     }
5877
5878     &__buffer {
5879       background: rgba($white, 0.2);
5880     }
5881
5882     &__handle {
5883       position: absolute;
5884       z-index: 3;
5885       opacity: 0;
5886       border-radius: 50%;
5887       width: 12px;
5888       height: 12px;
5889       top: 10px;
5890       margin-left: -6px;
5891       background: lighten($ui-highlight-color, 8%);
5892       box-shadow: 1px 2px 6px rgba($base-shadow-color, 0.2);
5893
5894       .no-reduce-motion & {
5895         transition: opacity .1s ease;
5896       }
5897
5898       &.active {
5899         opacity: 1;
5900       }
5901     }
5902
5903     &:hover {
5904       .video-player__seek__handle {
5905         opacity: 1;
5906       }
5907     }
5908   }
5909
5910   &.detailed,
5911   &.fullscreen {
5912     .video-player__buttons {
5913       .player-button {
5914         padding-top: 10px;
5915         padding-bottom: 10px;
5916       }
5917     }
5918   }
5919 }
5920
5921 .gifv {
5922   video {
5923     max-width: 100vw;
5924     max-height: 80vh;
5925   }
5926 }
5927
5928 .directory {
5929   &__list {
5930     width: 100%;
5931     margin: 10px 0;
5932     transition: opacity 100ms ease-in;
5933
5934     &.loading {
5935       opacity: 0.7;
5936     }
5937
5938     @media screen and (max-width: $no-gap-breakpoint) {
5939       margin: 0;
5940     }
5941   }
5942
5943   &__card {
5944     box-sizing: border-box;
5945     margin-bottom: 10px;
5946
5947     &__img {
5948       height: 125px;
5949       position: relative;
5950       background: darken($ui-base-color, 12%);
5951       overflow: hidden;
5952
5953       img {
5954         display: block;
5955         width: 100%;
5956         height: 100%;
5957         margin: 0;
5958         object-fit: cover;
5959       }
5960     }
5961
5962     &__bar {
5963       display: flex;
5964       align-items: center;
5965       background: lighten($ui-base-color, 4%);
5966       padding: 10px;
5967
5968       &__name {
5969         flex: 1 1 auto;
5970         display: flex;
5971         align-items: center;
5972         text-decoration: none;
5973         overflow: hidden;
5974       }
5975
5976       &__relationship {
5977         width: 23px;
5978         min-height: 1px;
5979         flex: 0 0 auto;
5980       }
5981
5982       .avatar {
5983         flex: 0 0 auto;
5984         width: 48px;
5985         height: 48px;
5986         padding-top: 2px;
5987
5988         img {
5989           width: 100%;
5990           height: 100%;
5991           display: block;
5992           margin: 0;
5993           border-radius: 4px;
5994           background: darken($ui-base-color, 8%);
5995           object-fit: cover;
5996         }
5997       }
5998
5999       .display-name {
6000         margin-left: 15px;
6001         text-align: left;
6002
6003         strong {
6004           font-size: 15px;
6005           color: $primary-text-color;
6006           font-weight: 500;
6007           overflow: hidden;
6008           text-overflow: ellipsis;
6009         }
6010
6011         span {
6012           display: block;
6013           font-size: 14px;
6014           color: $darker-text-color;
6015           font-weight: 400;
6016           overflow: hidden;
6017           text-overflow: ellipsis;
6018         }
6019       }
6020     }
6021
6022     &__extra {
6023       background: $ui-base-color;
6024       display: flex;
6025       align-items: center;
6026       justify-content: center;
6027
6028       .accounts-table__count {
6029         width: 33.33%;
6030         flex: 0 0 auto;
6031         padding: 15px 0;
6032       }
6033
6034       .account__header__content {
6035         box-sizing: border-box;
6036         padding: 15px 10px;
6037         border-bottom: 1px solid lighten($ui-base-color, 8%);
6038         width: 100%;
6039         min-height: 18px + 30px;
6040         white-space: nowrap;
6041         overflow: hidden;
6042         text-overflow: ellipsis;
6043
6044         p {
6045           display: none;
6046
6047           &:first-child {
6048             display: inline;
6049           }
6050         }
6051
6052         br {
6053           display: none;
6054         }
6055       }
6056     }
6057   }
6058 }
6059
6060 .account-gallery__container {
6061   display: flex;
6062   flex-wrap: wrap;
6063   padding: 4px 2px;
6064 }
6065
6066 .account-gallery__item {
6067   border: 0;
6068   box-sizing: border-box;
6069   display: block;
6070   position: relative;
6071   border-radius: 4px;
6072   overflow: hidden;
6073   margin: 2px;
6074
6075   &__icons {
6076     position: absolute;
6077     top: 50%;
6078     left: 50%;
6079     transform: translate(-50%, -50%);
6080     font-size: 24px;
6081   }
6082 }
6083
6084 .notification__filter-bar,
6085 .account__section-headline {
6086   background: darken($ui-base-color, 4%);
6087   border-bottom: 1px solid lighten($ui-base-color, 8%);
6088   cursor: default;
6089   display: flex;
6090   flex-shrink: 0;
6091
6092   button {
6093     background: darken($ui-base-color, 4%);
6094     border: 0;
6095     margin: 0;
6096   }
6097
6098   button,
6099   a {
6100     display: block;
6101     flex: 1 1 auto;
6102     color: $darker-text-color;
6103     padding: 15px 0;
6104     font-size: 14px;
6105     font-weight: 500;
6106     text-align: center;
6107     text-decoration: none;
6108     position: relative;
6109     width: 100%;
6110     white-space: nowrap;
6111
6112     &.active {
6113       color: $secondary-text-color;
6114
6115       &::before,
6116       &::after {
6117         display: block;
6118         content: "";
6119         position: absolute;
6120         bottom: 0;
6121         left: 50%;
6122         width: 0;
6123         height: 0;
6124         transform: translateX(-50%);
6125         border-style: solid;
6126         border-width: 0 10px 10px;
6127         border-color: transparent transparent lighten($ui-base-color, 8%);
6128       }
6129
6130       &::after {
6131         bottom: -1px;
6132         border-color: transparent transparent $ui-base-color;
6133       }
6134     }
6135   }
6136
6137   &.directory__section-headline {
6138     background: darken($ui-base-color, 2%);
6139     border-bottom-color: transparent;
6140
6141     a,
6142     button {
6143       &.active {
6144         &::before {
6145           display: none;
6146         }
6147
6148         &::after {
6149           border-color: transparent transparent darken($ui-base-color, 7%);
6150         }
6151       }
6152     }
6153   }
6154 }
6155
6156 .filter-form {
6157   background: $ui-base-color;
6158
6159   &__column {
6160     padding: 10px 15px;
6161   }
6162
6163   .radio-button {
6164     display: block;
6165   }
6166 }
6167
6168 .column-settings__row .radio-button {
6169   display: block;
6170 }
6171
6172 .radio-button {
6173   font-size: 14px;
6174   position: relative;
6175   display: inline-block;
6176   padding: 6px 0;
6177   line-height: 18px;
6178   cursor: default;
6179   white-space: nowrap;
6180   overflow: hidden;
6181   text-overflow: ellipsis;
6182   cursor: pointer;
6183
6184   input[type=radio],
6185   input[type=checkbox] {
6186     display: none;
6187   }
6188
6189   &__input {
6190     display: inline-block;
6191     position: relative;
6192     border: 1px solid $ui-primary-color;
6193     box-sizing: border-box;
6194     width: 18px;
6195     height: 18px;
6196     flex: 0 0 auto;
6197     margin-right: 10px;
6198     top: -1px;
6199     border-radius: 50%;
6200     vertical-align: middle;
6201
6202     &.checked {
6203       border-color: lighten($ui-highlight-color, 8%);
6204       background: lighten($ui-highlight-color, 8%);
6205     }
6206   }
6207 }
6208
6209 ::-webkit-scrollbar-thumb {
6210   border-radius: 0;
6211 }
6212
6213 .search-popout {
6214   @include search-popout;
6215 }
6216
6217 noscript {
6218   text-align: center;
6219
6220   img {
6221     width: 200px;
6222     opacity: 0.5;
6223     animation: flicker 4s infinite;
6224   }
6225
6226   div {
6227     font-size: 14px;
6228     margin: 30px auto;
6229     color: $secondary-text-color;
6230     max-width: 400px;
6231
6232     a {
6233       color: $highlight-text-color;
6234       text-decoration: underline;
6235
6236       &:hover {
6237         text-decoration: none;
6238       }
6239     }
6240   }
6241 }
6242
6243 @keyframes flicker {
6244   0% { opacity: 1; }
6245   30% { opacity: 0.75; }
6246   100% { opacity: 1; }
6247 }
6248
6249 @media screen and (max-width: 630px) and (max-height: 400px) {
6250   $duration: 400ms;
6251   $delay: 100ms;
6252
6253   .tabs-bar,
6254   .search {
6255     will-change: margin-top;
6256     transition: margin-top $duration $delay;
6257   }
6258
6259   .navigation-bar {
6260     will-change: padding-bottom;
6261     transition: padding-bottom $duration $delay;
6262   }
6263
6264   .navigation-bar {
6265     & > a:first-child {
6266       will-change: margin-top, margin-left, margin-right, width;
6267       transition: margin-top $duration $delay, margin-left $duration ($duration + $delay), margin-right $duration ($duration + $delay);
6268     }
6269
6270     & > .navigation-bar__profile-edit {
6271       will-change: margin-top;
6272       transition: margin-top $duration $delay;
6273     }
6274
6275     .navigation-bar__actions {
6276       & > .icon-button.close {
6277         will-change: opacity transform;
6278         transition: opacity $duration * 0.5 $delay,
6279                     transform $duration $delay;
6280       }
6281
6282       & > .compose__action-bar .icon-button {
6283         will-change: opacity transform;
6284         transition: opacity $duration * 0.5 $delay + $duration * 0.5,
6285                     transform $duration $delay;
6286       }
6287     }
6288   }
6289
6290   .is-composing {
6291     .tabs-bar,
6292     .search {
6293       margin-top: -50px;
6294     }
6295
6296     .navigation-bar {
6297       padding-bottom: 0;
6298
6299       & > a:first-child {
6300         margin: -100px 10px 0 -50px;
6301       }
6302
6303       .navigation-bar__profile {
6304         padding-top: 2px;
6305       }
6306
6307       .navigation-bar__profile-edit {
6308         position: absolute;
6309         margin-top: -60px;
6310       }
6311
6312       .navigation-bar__actions {
6313         .icon-button.close {
6314           pointer-events: auto;
6315           opacity: 1;
6316           transform: scale(1, 1) translate(0, 0);
6317           bottom: 5px;
6318         }
6319
6320         .compose__action-bar .icon-button {
6321           pointer-events: none;
6322           opacity: 0;
6323           transform: scale(0, 1) translate(100%, 0);
6324         }
6325       }
6326     }
6327   }
6328 }
6329
6330 .embed-modal {
6331   width: auto;
6332   max-width: 80vw;
6333   max-height: 80vh;
6334
6335   h4 {
6336     padding: 30px;
6337     font-weight: 500;
6338     font-size: 16px;
6339     text-align: center;
6340   }
6341
6342   .embed-modal__container {
6343     padding: 10px;
6344
6345     .hint {
6346       margin-bottom: 15px;
6347     }
6348
6349     .embed-modal__html {
6350       outline: 0;
6351       box-sizing: border-box;
6352       display: block;
6353       width: 100%;
6354       border: 0;
6355       padding: 10px;
6356       font-family: $font-monospace, monospace;
6357       background: $ui-base-color;
6358       color: $primary-text-color;
6359       font-size: 14px;
6360       margin: 0;
6361       margin-bottom: 15px;
6362       border-radius: 4px;
6363
6364       &::-moz-focus-inner {
6365         border: 0;
6366       }
6367
6368       &::-moz-focus-inner,
6369       &:focus,
6370       &:active {
6371         outline: 0 !important;
6372       }
6373
6374       &:focus {
6375         background: lighten($ui-base-color, 4%);
6376       }
6377
6378       @media screen and (max-width: 600px) {
6379         font-size: 16px;
6380       }
6381     }
6382
6383     .embed-modal__iframe {
6384       width: 400px;
6385       max-width: 100%;
6386       overflow: hidden;
6387       border: 0;
6388       border-radius: 4px;
6389     }
6390   }
6391 }
6392
6393 .account__moved-note {
6394   padding: 14px 10px;
6395   padding-bottom: 16px;
6396   background: lighten($ui-base-color, 4%);
6397   border-top: 1px solid lighten($ui-base-color, 8%);
6398   border-bottom: 1px solid lighten($ui-base-color, 8%);
6399
6400   &__message {
6401     position: relative;
6402     margin-left: 58px;
6403     color: $dark-text-color;
6404     padding: 8px 0;
6405     padding-top: 0;
6406     padding-bottom: 4px;
6407     font-size: 14px;
6408
6409     > span {
6410       display: block;
6411       overflow: hidden;
6412       text-overflow: ellipsis;
6413     }
6414   }
6415
6416   &__icon-wrapper {
6417     left: -26px;
6418     position: absolute;
6419   }
6420
6421   .detailed-status__display-avatar {
6422     position: relative;
6423   }
6424
6425   .detailed-status__display-name {
6426     margin-bottom: 0;
6427   }
6428 }
6429
6430 .column-inline-form {
6431   padding: 15px;
6432   padding-right: 0;
6433   display: flex;
6434   justify-content: flex-start;
6435   align-items: center;
6436   background: lighten($ui-base-color, 4%);
6437
6438   label {
6439     flex: 1 1 auto;
6440
6441     input {
6442       width: 100%;
6443
6444       &:focus {
6445         outline: 0;
6446       }
6447     }
6448   }
6449
6450   .icon-button {
6451     flex: 0 0 auto;
6452     margin: 0 10px;
6453   }
6454 }
6455
6456 .drawer__backdrop {
6457   cursor: pointer;
6458   position: absolute;
6459   top: 0;
6460   left: 0;
6461   width: 100%;
6462   height: 100%;
6463   background: rgba($base-overlay-background, 0.5);
6464 }
6465
6466 .list-editor {
6467   background: $ui-base-color;
6468   flex-direction: column;
6469   border-radius: 8px;
6470   box-shadow: 2px 4px 15px rgba($base-shadow-color, 0.4);
6471   width: 380px;
6472   overflow: hidden;
6473
6474   @media screen and (max-width: 420px) {
6475     width: 90%;
6476   }
6477
6478   h4 {
6479     padding: 15px 0;
6480     background: lighten($ui-base-color, 13%);
6481     font-weight: 500;
6482     font-size: 16px;
6483     text-align: center;
6484     border-radius: 8px 8px 0 0;
6485   }
6486
6487   .drawer__pager {
6488     height: 50vh;
6489   }
6490
6491   .drawer__inner {
6492     border-radius: 0 0 8px 8px;
6493
6494     &.backdrop {
6495       width: calc(100% - 60px);
6496       box-shadow: 2px 4px 15px rgba($base-shadow-color, 0.4);
6497       border-radius: 0 0 0 8px;
6498     }
6499   }
6500
6501   &__accounts {
6502     overflow-y: auto;
6503   }
6504
6505   .account__display-name {
6506     &:hover strong {
6507       text-decoration: none;
6508     }
6509   }
6510
6511   .account__avatar {
6512     cursor: default;
6513   }
6514
6515   .search {
6516     margin-bottom: 0;
6517   }
6518 }
6519
6520 .list-adder {
6521   background: $ui-base-color;
6522   flex-direction: column;
6523   border-radius: 8px;
6524   box-shadow: 2px 4px 15px rgba($base-shadow-color, 0.4);
6525   width: 380px;
6526   overflow: hidden;
6527
6528   @media screen and (max-width: 420px) {
6529     width: 90%;
6530   }
6531
6532   &__account {
6533     background: lighten($ui-base-color, 13%);
6534   }
6535
6536   &__lists {
6537     background: lighten($ui-base-color, 13%);
6538     height: 50vh;
6539     border-radius: 0 0 8px 8px;
6540     overflow-y: auto;
6541   }
6542
6543   .list {
6544     padding: 10px;
6545     border-bottom: 1px solid lighten($ui-base-color, 8%);
6546   }
6547
6548   .list__wrapper {
6549     display: flex;
6550   }
6551
6552   .list__display-name {
6553     flex: 1 1 auto;
6554     overflow: hidden;
6555     text-decoration: none;
6556     font-size: 16px;
6557     padding: 10px;
6558   }
6559 }
6560
6561 .focal-point {
6562   position: relative;
6563   cursor: move;
6564   overflow: hidden;
6565   height: 100%;
6566   display: flex;
6567   justify-content: center;
6568   align-items: center;
6569   background: $base-shadow-color;
6570
6571   img,
6572   video,
6573   canvas {
6574     display: block;
6575     max-height: 80vh;
6576     width: 100%;
6577     height: auto;
6578     margin: 0;
6579     object-fit: contain;
6580     background: $base-shadow-color;
6581   }
6582
6583   &__reticle {
6584     position: absolute;
6585     width: 100px;
6586     height: 100px;
6587     transform: translate(-50%, -50%);
6588     background: url('../images/reticle.png') no-repeat 0 0;
6589     border-radius: 50%;
6590     box-shadow: 0 0 0 9999em rgba($base-shadow-color, 0.35);
6591   }
6592
6593   &__overlay {
6594     position: absolute;
6595     width: 100%;
6596     height: 100%;
6597     top: 0;
6598     left: 0;
6599   }
6600
6601   &__preview {
6602     position: absolute;
6603     bottom: 10px;
6604     right: 10px;
6605     z-index: 2;
6606     cursor: move;
6607     transition: opacity 0.1s ease;
6608
6609     &:hover {
6610       opacity: 0.5;
6611     }
6612
6613     strong {
6614       color: $primary-text-color;
6615       font-size: 14px;
6616       font-weight: 500;
6617       display: block;
6618       margin-bottom: 5px;
6619     }
6620
6621     div {
6622       border-radius: 4px;
6623       box-shadow: 0 0 14px rgba($base-shadow-color, 0.2);
6624     }
6625   }
6626
6627   @media screen and (max-width: 480px) {
6628     img,
6629     video {
6630       max-height: 100%;
6631     }
6632
6633     &__preview {
6634       display: none;
6635     }
6636   }
6637 }
6638
6639 .account__header__content {
6640   color: $darker-text-color;
6641   font-size: 14px;
6642   font-weight: 400;
6643   overflow: hidden;
6644   word-break: normal;
6645   word-wrap: break-word;
6646
6647   p {
6648     margin-bottom: 20px;
6649
6650     &:last-child {
6651       margin-bottom: 0;
6652     }
6653   }
6654
6655   a {
6656     color: inherit;
6657     text-decoration: underline;
6658
6659     &:hover {
6660       text-decoration: none;
6661     }
6662   }
6663 }
6664
6665 .account__header {
6666   overflow: hidden;
6667
6668   &.inactive {
6669     opacity: 0.5;
6670
6671     .account__header__image,
6672     .account__avatar {
6673       filter: grayscale(100%);
6674     }
6675   }
6676
6677   &__info {
6678     position: absolute;
6679     top: 10px;
6680     left: 10px;
6681   }
6682
6683   &__image {
6684     overflow: hidden;
6685     height: 145px;
6686     position: relative;
6687     background: darken($ui-base-color, 4%);
6688
6689     img {
6690       object-fit: cover;
6691       display: block;
6692       width: 100%;
6693       height: 100%;
6694       margin: 0;
6695     }
6696   }
6697
6698   &__bar {
6699     position: relative;
6700     background: lighten($ui-base-color, 4%);
6701     padding: 5px;
6702     border-bottom: 1px solid lighten($ui-base-color, 12%);
6703
6704     .avatar {
6705       display: block;
6706       flex: 0 0 auto;
6707       width: 94px;
6708       margin-left: -2px;
6709
6710       .account__avatar {
6711         background: darken($ui-base-color, 8%);
6712         border: 2px solid lighten($ui-base-color, 4%);
6713       }
6714     }
6715   }
6716
6717   &__tabs {
6718     display: flex;
6719     align-items: flex-start;
6720     padding: 7px 10px;
6721     margin-top: -55px;
6722
6723     &__buttons {
6724       display: flex;
6725       align-items: center;
6726       padding-top: 55px;
6727       overflow: hidden;
6728
6729       .icon-button {
6730         border: 1px solid lighten($ui-base-color, 12%);
6731         border-radius: 4px;
6732         box-sizing: content-box;
6733         padding: 2px;
6734       }
6735
6736       & > .icon-button {
6737         margin-right: 8px;
6738       }
6739
6740       .button {
6741         margin: 0 8px;
6742       }
6743     }
6744
6745     &__name {
6746       padding: 5px 10px;
6747
6748       .account-role {
6749         vertical-align: top;
6750       }
6751
6752       .emojione {
6753         width: 22px;
6754         height: 22px;
6755       }
6756
6757       h1 {
6758         font-size: 16px;
6759         line-height: 24px;
6760         color: $primary-text-color;
6761         font-weight: 500;
6762         overflow: hidden;
6763         white-space: nowrap;
6764         text-overflow: ellipsis;
6765
6766         small {
6767           display: block;
6768           font-size: 14px;
6769           color: $darker-text-color;
6770           font-weight: 400;
6771           overflow: hidden;
6772           text-overflow: ellipsis;
6773         }
6774       }
6775     }
6776
6777     .spacer {
6778       flex: 1 1 auto;
6779     }
6780   }
6781
6782   &__bio {
6783     overflow: hidden;
6784     margin: 0 -5px;
6785
6786     .account__header__content {
6787       padding: 20px 15px;
6788       padding-bottom: 5px;
6789       color: $primary-text-color;
6790
6791       .columns-area--mobile & {
6792         padding-left: 20px;
6793         padding-right: 20px;
6794       }
6795     }
6796
6797     .account__header__joined {
6798       font-size: 14px;
6799       padding: 5px 15px;
6800       color: $darker-text-color;
6801
6802       .columns-area--mobile & {
6803         padding-left: 20px;
6804         padding-right: 20px;
6805       }
6806     }
6807
6808     .account__header__fields {
6809       margin: 0;
6810       border-top: 1px solid lighten($ui-base-color, 12%);
6811
6812       a {
6813         color: lighten($ui-highlight-color, 8%);
6814       }
6815
6816       dl:first-child .verified {
6817         border-radius: 0 4px 0 0;
6818       }
6819
6820       .verified a {
6821         color: $valid-value-color;
6822       }
6823     }
6824   }
6825
6826   &__extra {
6827     margin-top: 4px;
6828
6829     &__links {
6830       font-size: 14px;
6831       color: $darker-text-color;
6832       padding: 10px 0;
6833
6834       a {
6835         display: inline-block;
6836         color: $darker-text-color;
6837         text-decoration: none;
6838         padding: 5px 10px;
6839         font-weight: 500;
6840
6841         strong {
6842           font-weight: 700;
6843           color: $primary-text-color;
6844         }
6845       }
6846     }
6847   }
6848
6849   &__account-note {
6850     padding: 15px;
6851     padding-bottom: 10px;
6852     color: $primary-text-color;
6853     font-size: 14px;
6854     font-weight: 400;
6855     border-bottom: 1px solid lighten($ui-base-color, 12%);
6856
6857     .columns-area--mobile & {
6858       padding-left: 20px;
6859       padding-right: 20px;
6860     }
6861
6862     label {
6863       display: block;
6864       font-size: 12px;
6865       font-weight: 500;
6866       color: $darker-text-color;
6867       text-transform: uppercase;
6868       margin-bottom: 5px;
6869     }
6870
6871     textarea {
6872       display: block;
6873       box-sizing: border-box;
6874       width: calc(100% + 20px);
6875       color: $secondary-text-color;
6876       background: transparent;
6877       padding: 10px;
6878       margin: 0 -10px;
6879       font-family: inherit;
6880       font-size: 14px;
6881       resize: none;
6882       border: 0;
6883       outline: 0;
6884       border-radius: 4px;
6885
6886       &::placeholder {
6887         color: $dark-text-color;
6888         opacity: 1;
6889       }
6890
6891       &:focus {
6892         background: $ui-base-color;
6893       }
6894     }
6895   }
6896 }
6897
6898 .trends {
6899   &__header {
6900     color: $dark-text-color;
6901     background: lighten($ui-base-color, 2%);
6902     border-bottom: 1px solid darken($ui-base-color, 4%);
6903     font-weight: 500;
6904     padding: 15px;
6905     font-size: 16px;
6906     cursor: default;
6907
6908     .fa {
6909       display: inline-block;
6910       margin-right: 5px;
6911     }
6912   }
6913
6914   &__item {
6915     display: flex;
6916     align-items: center;
6917     padding: 15px;
6918     border-bottom: 1px solid lighten($ui-base-color, 8%);
6919
6920     &:last-child {
6921       border-bottom: 0;
6922     }
6923
6924     &__name {
6925       flex: 1 1 auto;
6926       color: $dark-text-color;
6927       overflow: hidden;
6928       text-overflow: ellipsis;
6929       white-space: nowrap;
6930
6931       strong {
6932         font-weight: 500;
6933       }
6934
6935       a {
6936         color: $darker-text-color;
6937         text-decoration: none;
6938         font-size: 14px;
6939         font-weight: 500;
6940         display: block;
6941         overflow: hidden;
6942         text-overflow: ellipsis;
6943         white-space: nowrap;
6944
6945         &:hover,
6946         &:focus,
6947         &:active {
6948           span {
6949             text-decoration: underline;
6950           }
6951         }
6952       }
6953     }
6954
6955     &__current {
6956       flex: 0 0 auto;
6957       font-size: 24px;
6958       line-height: 36px;
6959       font-weight: 500;
6960       text-align: right;
6961       padding-right: 15px;
6962       margin-left: 5px;
6963       color: $secondary-text-color;
6964     }
6965
6966     &__sparkline {
6967       flex: 0 0 auto;
6968       width: 50px;
6969
6970       path:first-child {
6971         fill: rgba($highlight-text-color, 0.25) !important;
6972         fill-opacity: 1 !important;
6973       }
6974
6975       path:last-child {
6976         stroke: lighten($highlight-text-color, 6%) !important;
6977         fill: none !important;
6978       }
6979     }
6980   }
6981 }
6982
6983 .conversation {
6984   display: flex;
6985   border-bottom: 1px solid lighten($ui-base-color, 8%);
6986   padding: 5px;
6987   padding-bottom: 0;
6988
6989   &:focus {
6990     background: lighten($ui-base-color, 2%);
6991     outline: 0;
6992   }
6993
6994   &__avatar {
6995     flex: 0 0 auto;
6996     padding: 10px;
6997     padding-top: 12px;
6998     position: relative;
6999     cursor: pointer;
7000   }
7001
7002   &__unread {
7003     display: inline-block;
7004     background: $highlight-text-color;
7005     border-radius: 50%;
7006     width: 0.625rem;
7007     height: 0.625rem;
7008     margin: -.1ex .15em .1ex;
7009   }
7010
7011   &__content {
7012     flex: 1 1 auto;
7013     padding: 10px 5px;
7014     padding-right: 15px;
7015     overflow: hidden;
7016
7017     &__info {
7018       overflow: hidden;
7019       display: flex;
7020       flex-direction: row-reverse;
7021       justify-content: space-between;
7022     }
7023
7024     &__relative-time {
7025       font-size: 15px;
7026       color: $darker-text-color;
7027       padding-left: 15px;
7028     }
7029
7030     &__names {
7031       color: $darker-text-color;
7032       font-size: 15px;
7033       white-space: nowrap;
7034       overflow: hidden;
7035       text-overflow: ellipsis;
7036       margin-bottom: 4px;
7037       flex-basis: 90px;
7038       flex-grow: 1;
7039
7040       a {
7041         color: $primary-text-color;
7042         text-decoration: none;
7043
7044         &:hover,
7045         &:focus,
7046         &:active {
7047           text-decoration: underline;
7048         }
7049       }
7050     }
7051
7052     a {
7053       word-break: break-word;
7054     }
7055   }
7056
7057   &--unread {
7058     background: lighten($ui-base-color, 2%);
7059
7060     &:focus {
7061       background: lighten($ui-base-color, 4%);
7062     }
7063
7064     .conversation__content__info {
7065       font-weight: 700;
7066     }
7067
7068     .conversation__content__relative-time {
7069       color: $primary-text-color;
7070     }
7071   }
7072 }
7073
7074 .announcements {
7075   background: lighten($ui-base-color, 8%);
7076   font-size: 13px;
7077   display: flex;
7078   align-items: flex-end;
7079
7080   &__mastodon {
7081     width: 124px;
7082     flex: 0 0 auto;
7083
7084     @media screen and (max-width: 124px + 300px) {
7085       display: none;
7086     }
7087   }
7088
7089   &__container {
7090     width: calc(100% - 124px);
7091     flex: 0 0 auto;
7092     position: relative;
7093
7094     @media screen and (max-width: 124px + 300px) {
7095       width: 100%;
7096     }
7097   }
7098
7099   &__item {
7100     box-sizing: border-box;
7101     width: 100%;
7102     padding: 15px;
7103     position: relative;
7104     font-size: 15px;
7105     line-height: 20px;
7106     word-wrap: break-word;
7107     font-weight: 400;
7108     max-height: 50vh;
7109     overflow: hidden;
7110     display: flex;
7111     flex-direction: column;
7112
7113     &__range {
7114       display: block;
7115       font-weight: 500;
7116       margin-bottom: 10px;
7117       padding-right: 18px;
7118     }
7119
7120     &__unread {
7121       position: absolute;
7122       top: 19px;
7123       right: 19px;
7124       display: block;
7125       background: $highlight-text-color;
7126       border-radius: 50%;
7127       width: 0.625rem;
7128       height: 0.625rem;
7129     }
7130   }
7131
7132   &__pagination {
7133     padding: 15px;
7134     color: $darker-text-color;
7135     position: absolute;
7136     bottom: 3px;
7137     right: 0;
7138   }
7139 }
7140
7141 .layout-multiple-columns .announcements__mastodon {
7142   display: none;
7143 }
7144
7145 .layout-multiple-columns .announcements__container {
7146   width: 100%;
7147 }
7148
7149 .reactions-bar {
7150   display: flex;
7151   flex-wrap: wrap;
7152   align-items: center;
7153   margin-top: 15px;
7154   margin-left: -2px;
7155   width: calc(100% - (90px - 33px));
7156
7157   &__item {
7158     flex-shrink: 0;
7159     background: lighten($ui-base-color, 12%);
7160     border: 0;
7161     border-radius: 3px;
7162     margin: 2px;
7163     cursor: pointer;
7164     user-select: none;
7165     padding: 0 6px;
7166     display: flex;
7167     align-items: center;
7168     transition: all 100ms ease-in;
7169     transition-property: background-color, color;
7170
7171     &__emoji {
7172       display: block;
7173       margin: 3px 0;
7174       width: 16px;
7175       height: 16px;
7176
7177       img {
7178         display: block;
7179         margin: 0;
7180         width: 100%;
7181         height: 100%;
7182         min-width: auto;
7183         min-height: auto;
7184         vertical-align: bottom;
7185         object-fit: contain;
7186       }
7187     }
7188
7189     &__count {
7190       display: block;
7191       min-width: 9px;
7192       font-size: 13px;
7193       font-weight: 500;
7194       text-align: center;
7195       margin-left: 6px;
7196       color: $darker-text-color;
7197     }
7198
7199     &:hover,
7200     &:focus,
7201     &:active {
7202       background: lighten($ui-base-color, 16%);
7203       transition: all 200ms ease-out;
7204       transition-property: background-color, color;
7205
7206       &__count {
7207         color: lighten($darker-text-color, 4%);
7208       }
7209     }
7210
7211     &.active {
7212       transition: all 100ms ease-in;
7213       transition-property: background-color, color;
7214       background-color: mix(lighten($ui-base-color, 12%), $ui-highlight-color, 80%);
7215
7216       .reactions-bar__item__count {
7217         color: lighten($highlight-text-color, 8%);
7218       }
7219     }
7220   }
7221
7222   .emoji-picker-dropdown {
7223     margin: 2px;
7224   }
7225
7226   &:hover .emoji-button {
7227     opacity: 0.85;
7228   }
7229
7230   .emoji-button {
7231     color: $darker-text-color;
7232     margin: 0;
7233     font-size: 16px;
7234     width: auto;
7235     flex-shrink: 0;
7236     padding: 0 6px;
7237     height: 22px;
7238     display: flex;
7239     align-items: center;
7240     opacity: 0.5;
7241     transition: all 100ms ease-in;
7242     transition-property: background-color, color;
7243
7244     &:hover,
7245     &:active,
7246     &:focus {
7247       opacity: 1;
7248       color: lighten($darker-text-color, 4%);
7249       transition: all 200ms ease-out;
7250       transition-property: background-color, color;
7251     }
7252   }
7253
7254   &--empty {
7255     .emoji-button {
7256       padding: 0;
7257     }
7258   }
7259 }
7260
7261 .notification,
7262 .status__wrapper {
7263   position: relative;
7264
7265   &.unread {
7266     &::before {
7267       content: "";
7268       position: absolute;
7269       top: 0;
7270       left: 0;
7271       pointer-events: 0;
7272       width: 100%;
7273       height: 100%;
7274       border-left: 2px solid $highlight-text-color;
7275       pointer-events: none;
7276     }
7277   }
7278 }
7279
7280 .picture-in-picture {
7281   position: fixed;
7282   bottom: 20px;
7283   right: 20px;
7284   width: 300px;
7285
7286   &__footer {
7287     border-radius: 0 0 4px 4px;
7288     background: lighten($ui-base-color, 4%);
7289     padding: 10px;
7290     padding-top: 12px;
7291     display: flex;
7292     justify-content: space-between;
7293   }
7294
7295   &__header {
7296     border-radius: 4px 4px 0 0;
7297     background: lighten($ui-base-color, 4%);
7298     padding: 10px;
7299     display: flex;
7300     justify-content: space-between;
7301
7302     &__account {
7303       display: flex;
7304       text-decoration: none;
7305       overflow: hidden;
7306     }
7307
7308     .account__avatar {
7309       margin-right: 10px;
7310     }
7311
7312     .display-name {
7313       color: $primary-text-color;
7314       text-decoration: none;
7315
7316       strong,
7317       span {
7318         display: block;
7319         text-overflow: ellipsis;
7320         overflow: hidden;
7321       }
7322
7323       span {
7324         color: $darker-text-color;
7325       }
7326     }
7327   }
7328
7329   .video-player,
7330   .audio-player {
7331     border-radius: 0;
7332   }
7333 }
7334
7335 .picture-in-picture-placeholder {
7336   box-sizing: border-box;
7337   border: 2px dashed lighten($ui-base-color, 8%);
7338   background: $base-shadow-color;
7339   display: flex;
7340   flex-direction: column;
7341   align-items: center;
7342   justify-content: center;
7343   margin-top: 10px;
7344   font-size: 16px;
7345   font-weight: 500;
7346   cursor: pointer;
7347   color: $darker-text-color;
7348
7349   i {
7350     display: block;
7351     font-size: 24px;
7352     font-weight: 400;
7353     margin-bottom: 10px;
7354   }
7355
7356   &:hover,
7357   &:focus,
7358   &:active {
7359     border-color: lighten($ui-base-color, 12%);
7360   }
7361 }
7362
7363 .notifications-permission-banner {
7364   padding: 30px;
7365   border-bottom: 1px solid lighten($ui-base-color, 8%);
7366   display: flex;
7367   flex-direction: column;
7368   align-items: center;
7369   justify-content: center;
7370   position: relative;
7371
7372   &__close {
7373     position: absolute;
7374     top: 10px;
7375     right: 10px;
7376   }
7377
7378   h2 {
7379     font-size: 16px;
7380     font-weight: 500;
7381     margin-bottom: 15px;
7382     text-align: center;
7383   }
7384
7385   p {
7386     color: $darker-text-color;
7387     margin-bottom: 15px;
7388     text-align: center;
7389   }
7390 }