hometown/app/javascript/styles/macaron/diff.scss

// Notes!
// Sass color functions, "darken" and "lighten" are automatically replaced.

html {
  scrollbar-color: $pink rgba($pink, 0.25);
}

.loading-bar {
  background-color: $green;
}

.status__content a,
.reply-indicator__content a {
  &:hover,
  &:active,
  &:focus {
    color: $bilberry;
  }
}

::-webkit-scrollbar-thumb {
  background: $pink;
  border: 0;
}

::-webkit-scrollbar-thumb {
  background: $pink;
  border: 0;
}

::-webkit-scrollbar-thumb:hover {
  background: $pink;
  border: 0;
}

::-webkit-scrollbar-track:hover {
  background: $green;
}

.ui {
  background: $cream;
}

// Change the colors of button texts
.button {
  color: $white;

  &.button-alternative-2 {
    color: $white;
  }
}

// Change default background colors of columns
.column > .scrollable,
.getting-started,
.column-inline-form {
  background: $white;
  border: 1px solid lighten(#eeeeee, 4%);
  border-top: 0;
}

.getting-started {
  background: $green;
  border: 1px solid lighten($green, 8%);
}

.column-back-button,
.column-header {
  background: #c8c4dd;
  border: 1px solid lighten($purple, 8%);

  @media screen and (max-width: $no-gap-breakpoint) {
    border-top: 0;
  }

  &--slim-button {
    border: 0;
    top: -49px;
    right: 1px;
  }
}

.column-header__back-button,
.column-header__button,
.column-header__button.active,
.column-header__button.active {
  color: $ui-highlight-color;
  background: $purple;

  &:hover,
  &:active,
  &:focus {
    color: $ui-highlight-color;
    background: lighten($purple, 4%);
  }
}

.account__header__bar .avatar .account__avatar {
  border-color: $green;
}

.getting-started__footer a {
  color: $ui-secondary-color;
  text-decoration: underline;
}

.column-subheading {
  background: $green;
  border-bottom: 1px solid lighten($green, 8%);
}

.getting-started,
.scrollable {
  .column-link {
    background: $blue;
    border-bottom: 1px solid lighten($blue, 8%);

    &:hover,
    &:active,
    &:focus {
      background: lighten($blue, 8%);
    }
  }
}

.getting-started .navigation-bar {
  border-top: 1px solid lighten($ui-base-color, 8%);
  border-bottom: 1px solid lighten($ui-base-color, 8%);

  @media screen and (max-width: $no-gap-breakpoint) {
    border-top: 0;
  }
}

.compose-form__autosuggest-wrapper,
.poll__text input[type="text"],
.compose-form .spoiler-input__input,
.compose-form__poll-wrapper select,
.search__input,
.setting-text,
.box-widget input[type="text"],
.box-widget input[type="email"],
.box-widget input[type="password"],
.box-widget textarea,
.statuses-grid .detailed-status .audio-player {
  border: 1px solid lighten(#eeeeee, 4%);
}

.poll__chart {
  background: darken($purple, 4%);
}

.muted .poll__chart {
  background: rgba($purple, 0.8);
}

.poll__chart.leading {
  background: $pink;
}

.muted .poll__chart.leading {
  background: rgba($pink, 0.8);
}

.status {
  border-bottom: 1px solid lighten(#eeeeee, 4%);
}

.detailed-status__action-bar {
  border-top: 1px solid lighten($purple, 4%);
  border-bottom: 1px solid lighten($purple, 4%);
}

.search__input {
  @media screen and (max-width: $no-gap-breakpoint) {
    border-top: 0;
    border-bottom: 0;
  }

  background: $green;
  border: 1px solid lighten($green, 8%);
}

.search__input {
  &:focus {
    background: $purple;
    border: 1px solid lighten($purple, 8%);
  }
}

.list-editor .search .search__input {
  border-top: 0;
  border-bottom: 0;
}

.compose-form__poll-wrapper select {
  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(lighten($ui-base-color, 8%))}'/></svg>") no-repeat right 8px center / auto 16px;
}

.compose-form__poll-wrapper,
.compose-form__poll-wrapper .poll__footer {
  border-top-color: lighten($ui-base-color, 8%);
}

.notification__filter-bar,
.account__section-headline {
  background: $green;
  border: 1px solid lighten($green, 8%);
  border-top: 0;
}

.notification__filter-bar button {
  background: $green;
}

.compose-form .compose-form__buttons-wrapper {
  background: $ui-base-color;
  border: 1px solid lighten($ui-base-color, 8%);
  border-top: 0;
}

.drawer__inner {
  background: $pink;
  border: 1px solid lighten($pink, 8%);
}

.drawer__header {
  background: $blue;
  border: 1px solid lighten($blue, 8%);
}

.drawer__header a {
  &:active,
  &:focus,
  &:hover {
    background: lighten($blue, 4%);
  }
}

.drawer__inner__mastodon {
  background: $pink;
}

// Change the colors used in compose-form
.compose-form {
  .compose-form__modifiers {
    .compose-form__upload__actions .icon-button {
      color: lighten($white, 7%);

      &:active,
      &:focus,
      &:hover {
        color: $white;
      }
    }

    .compose-form__upload-description input {
      color: lighten($white, 7%);

      &::placeholder {
        color: lighten($white, 7%);
      }
    }
  }

  .compose-form__buttons-wrapper {
    background: darken($ui-base-color, 6%);
  }

  .autosuggest-textarea__suggestions {
    background: darken($ui-base-color, 6%);
  }

  .autosuggest-textarea__suggestions__item {
    &:hover,
    &:focus,
    &:active,
    &.selected {
      background: lighten($ui-base-color, 4%);
    }
  }
}

.account__header__tabs__buttons .icon-button {
  border-color: lighten($purple, 8%);
}

.emoji-mart-bar {
  border-color: lighten($ui-base-color, 4%);

  &:first-child {
    background: darken($ui-base-color, 6%);
  }
}

.emoji-mart-search input {
  background: rgba($ui-base-color, 0.3);
  border-color: $ui-base-color;
}

// Change the background colors of statuses
.focusable:focus {
  background: darken($green, 2%);
}

.status.status-direct {
  background: darken($ui-base-color, 2%);
}

.focusable:focus .status.status-direct {
  background: $ui-base-color;
}

.status.status-direct:not(.read) {
  background: $ui-base-color;
  border-bottom-color: lighten($ui-base-color, 4%);
}

.detailed-status,
.detailed-status__action-bar {
  background: darken($purple, 10%);
}

.reply-indicator {
  background: darken($purple, 8%);
}

// Change the background colors of status__content__spoiler-link
.reply-indicator__content .status__content__spoiler-link,
.status__content .status__content__spoiler-link {
  background: $pink;

  &:hover {
    background: lighten($pink, 4%);
  }
}

// Change the background colors of media and video spoilers
.media-spoiler,
.video-player__spoiler {
  background: $ui-base-color;
}

.privacy-dropdown.active .privacy-dropdown__value.active .icon-button {
  color: $white;
}

.account-gallery__item a {
  background-color: $ui-base-color;
}

// Change the colors used in the dropdown menu
.dropdown-menu {
  background: $white;

  &__arrow {
    &.left {
      border-left-color: $white;
    }

    &.top {
      border-top-color: $white;
    }

    &.bottom {
      border-bottom-color: $white;
    }

    &.right {
      border-right-color: $white;
    }
  }

  &__item {
    a {
      background: $white;
      color: $darker-text-color;
    }
  }

  &__container {
    &__header {
      background: $white;
      border-bottom: 1px solid lighten($purple, 16%);
    }
  }
}

body.admin {
  background: $cream;
}

.card > a:hover {
  .card__bar {
    background: $blue;
  }
}

.batch-table__toolbar {
  background: $green;
}

.batch-table__row {
  border-top: 0;
  border: 1px solid #fffdef;
  background: $blue;
}

.batch-table__row:nth-child(2n) {
  background: $green;
}

.filters .filter-subset a {
  border-bottom: 2px solid $green;
}

.filters .filter-subset a:hover,
.filters .filter-subset a:focus {
  border-bottom: 2px solid lighten($green, 8%);
}

.filters .filter-subset a.selected:hover,
.filters .filter-subset a.selected:focus {
  border-bottom: 2px solid lighten($blueberry, 8%);
}

.table > tbody > tr:nth-child(odd) > td,
.table > tbody > tr:nth-child(odd) > th {
  background: $green;
}

.table td,
.table th {
  padding: 8px;
  line-height: 18px;
  vertical-align: top;
  border-top: 1px solid $green;
  text-align: left;
  background: $blue;
}

.card__bar {
  background: $purple;
}

.admin-wrapper .sidebar {
  background: $green;
}

.admin-wrapper .content h2,
.admin-wrapper .content h4 {
  border-bottom: 1px solid #eeeeee;
}

.admin-wrapper {
  .content {
    &__heading {
      &__tabs {
        a {
          &.selected {
            color: $white;
          }
        }
      }
    }
  }
}

.admin-wrapper .sidebar ul a.selected {
  background: $purple;
  border-bottom: 1px solid $purple;
}

.admin-wrapper .sidebar ul a:hover {
  background: lighten($blue, 8%);
  border-bottom: 1px solid lighten($blue, 8%);
}

.admin-wrapper .sidebar ul a.selected:hover {
  background: lighten($purple, 4%);
  border-bottom: 1px solid lighten($purple, 4%);
}

.selected ul li a {
  background: $blue;
  border-bottom: 1px solid $blue;
}

.admin-wrapper .sidebar ul .simple-navigation-active-leaf a {
  background: $blueberry;
  border-bottom: 1px solid $blueberry;
}

.admin-wrapper .sidebar ul .simple-navigation-active-leaf a:hover {
  background: lighten($blueberry, 4%);
  border-bottom: 1px solid lighten($blueberry, 4%);
}

.dashboard__counters > div > div,
.dashboard__counters > div > a {
  background: $pink;
}

.dashboard__counters > div > a:hover,
.dashboard__counters > div > a:focus {
  background: lighten($pink, 4%);
}

// Change the text colors on inverted background
.privacy-dropdown__option.active,
.privacy-dropdown__option:hover,
.privacy-dropdown__option.active .privacy-dropdown__option__content,
.privacy-dropdown__option.active .privacy-dropdown__option__content strong,
.privacy-dropdown__option:hover .privacy-dropdown__option__content,
.privacy-dropdown__option:hover .privacy-dropdown__option__content strong,
.dropdown-menu__item a:active,
.dropdown-menu__item a:focus,
.dropdown-menu__item a:hover,
.actions-modal ul li:not(:empty) a.active,
.actions-modal ul li:not(:empty) a.active button,
.actions-modal ul li:not(:empty) a:active,
.actions-modal ul li:not(:empty) a:active button,
.actions-modal ul li:not(:empty) a:focus,
.actions-modal ul li:not(:empty) a:focus button,
.actions-modal ul li:not(:empty) a:hover,
.actions-modal ul li:not(:empty) a:hover button,
.admin-wrapper .sidebar ul .simple-navigation-active-leaf a,
.simple_form .block-button,
.simple_form .button,
.simple_form button {
  color: $white;
}

.dropdown-menu__separator {
  border-bottom-color: lighten($ui-base-color, 4%);
}

// Change the background colors of modals
.actions-modal,
.boost-modal,
.confirmation-modal,
.mute-modal,
.report-modal,
.embed-modal,
.error-modal,
.onboarding-modal {
  background: $ui-base-color;
}

.column-header__collapsible-inner {
  background: darken($blue, 4%);
  border: 1px solid lighten($blue, 8%);
  border-top: 0;
}

.boost-modal__action-bar,
.confirmation-modal__action-bar,
.mute-modal__action-bar,
.onboarding-modal__paginator,
.error-modal__footer {
  background: darken($ui-base-color, 6%);

  .onboarding-modal__nav,
  .error-modal__nav {
    &:hover,
    &:focus,
    &:active {
      background-color: darken($ui-base-color, 12%);
    }
  }
}

.display-case__case {
  background: $white;
}

.embed-modal .embed-modal__container .embed-modal__html {
  background: $white;

  &:focus {
    background: darken($ui-base-color, 6%);
  }
}

.react-toggle-track {
  background: $ui-secondary-color;
}

.react-toggle:hover:not(.react-toggle--disabled) .react-toggle-track {
  background: darken($ui-secondary-color, 10%);
}

.react-toggle.react-toggle--checked:hover:not(.react-toggle--disabled) .react-toggle-track {
  background: lighten($ui-highlight-color, 10%);
}

// Change the default color used for the text in an empty column or on the error column
.empty-column-indicator,
.error-column {
  color: $primary-text-color;
  background: $white;
}

.tabs-bar {
  background: $blue;
  border: 1px solid lighten($blue, 8%);
  border-bottom: 0;

  @media screen and (max-width: $no-gap-breakpoint) {
    border-top: 0;
  }

  &__link {
    padding-bottom: 14px;
    border-bottom-width: 1px;
    border-bottom-color: lighten($blue, 8%);

    &:hover,
    &:active,
    &:focus {
      background: lighten($blue, 4%);
    }

    &.active {
      &:hover,
      &:active,
      &:focus {
        background: transparent;
        border-bottom-color: $ui-highlight-color;
      }
    }
  }
}

// Change the default colors used on some parts of the profile pages
.activity-stream-tabs {
  background: $account-background-color;
  border-bottom-color: lighten($ui-base-color, 8%);
}

.getting-started__wrapper,
.getting-started,
.flex-spacer {
  background: $purple;
}

.box-widget,
.nothing-here,
.page-header,
.directory__tag > a,
.directory__tag > div,
.landing-page__call-to-action,
.contact-widget,
.landing .hero-widget__text,
.landing-page__information.contact-widget {
  background: $white;
  border: 1px solid lighten(#eeeeee, 4%);

  @media screen and (max-width: $no-gap-breakpoint) {
    border-left: 0;
    border-right: 0;
    border-top: 0;
  }
}

.directory__tag a:hover,
.directory__tag a:focus {
  background: $blue;
  border: 1px solid lighten($blue, 4%);
}

.page-header {
  background: $purple;
  border: 1px solid lighten($purple, 4%);
}

.directory,
.nothing-here,
.directory__tag a {
  background: $green;
  border: 1px solid lighten($green, 4%);
}

.box-widget {
  background: $blue;
  border: 1px solid lighten($blue, 4%);
}

.landing__grid__column-login .box-widget {
  background: $pink;
  border: 1px solid lighten($pink, 4%);
}

.landing .hero-widget__text {
  border-top: 0;
  border-bottom: 0;
}

.simple_form {
  input[type="text"],
  input[type="number"],
  input[type="email"],
  input[type="password"],
  select,
  textarea {
    border-color: $blueberry;

    &:hover {
      border-color: $bilberry;
    }
  }
}

.landing .hero-widget__footer {
  background: $purple;
  border: 1px solid lighten($purple, 8%);
  border-top: 0;

  @media screen and (max-width: $no-gap-breakpoint) {
    border: 0;
  }
}

.brand__tagline {
  color: $ui-secondary-color;
}

.landing-page__call-to-action {
  background: $purple;
}

.landing-page__information.contact-widget {
  background: $green;
}

.directory__tag > a {
  &:hover,
  &:active,
  &:focus {
    background: $ui-base-color;
  }

  @media screen and (max-width: $no-gap-breakpoint) {
    border: 0;
  }
}

.directory__tag.active > a,
.directory__tag.active > div {
  border-color: $ui-highlight-color;

  &,
  h4,
  h4 small,
  .fa,
  .trends__item__current {
    color: $white;
  }

  &:hover,
  &:active,
  &:focus {
    background: $ui-highlight-color;
  }
}

.batch-table {
  &__toolbar,
  &__row,
  .nothing-here {
    border-color: lighten($ui-base-color, 8%);
  }
}

.activity-stream {
  border: 1px solid lighten($ui-base-color, 8%);

  &--under-tabs {
    border-top: 0;
  }

  .entry {
    background: $account-background-color;

    .detailed-status.light,
    .more.light,
    .status.light {
      border-bottom-color: lighten($ui-base-color, 8%);
    }
  }

  .status.light {
    .status__content {
      color: $primary-text-color;
    }

    .display-name {
      strong {
        color: $primary-text-color;
      }
    }
  }
}

.accounts-grid {
  .account-grid-card {
    .controls {
      .icon-button {
        color: $darker-text-color;
      }
    }

    .name {
      a {
        color: $primary-text-color;
      }
    }

    .username {
      color: $darker-text-color;
    }

    .account__header__content {
      color: $primary-text-color;
    }
  }
}

.simple_form,
.table-form {
  .warning {
    box-shadow: none;
    background: rgba($error-red, 0.5);
    text-shadow: none;
  }

  .recommended {
    border-color: $ui-highlight-color;
    color: $ui-highlight-color;
    background-color: $blue;
  }
}

.compose-form .compose-form__warning {
  border-color: $ui-highlight-color;
  background-color: darken($blue, 6%);

  &,
  a {
    color: $ui-highlight-color;
  }
}

.status__content,
.reply-indicator__content {
  a {
    color: $highlight-text-color;
  }
}

.status.status-direct {
  background: darken($green, 6%);
}

.button.logo-button {
  color: $white;

  svg {
    fill: $white;
  }
}

.public-layout {
  .activity-stream {
    border-color: lighten(#eeeeee, 4%);
  }

  .account__section-headline {
    background: $green;
    border: 1px solid lighten($green, 8%);

    @media screen and (max-width: $no-gap-breakpoint) {
      border-top: 0;
    }
  }

  .header,
  .public-account-header,
  .public-account-bio {
    box-shadow: none;
  }

  .hero-widget__text {
    background: darken($blue, 4%);
    border: 1px solid lighten($blue, 4%);
  }

  .public-account-bio {
    background: $purple;
    border: 1px solid lighten($purple, 4%);
  }

  .header {
    background: $ui-base-color;
    border: 1px solid lighten($ui-base-color, 8%);

    @media screen and (max-width: $no-gap-breakpoint) {
      border: 0;
    }

    .brand {
      &:hover,
      &:focus,
      &:active {
        background: darken($pink, 4%);
      }
    }
  }

  .public-account-header {
    &__image {
      background: lighten($ui-base-color, 12%);

      &::after {
        box-shadow: none;
      }
    }

    &__bar {
      &::before {
        background: $account-background-color;
        border: 1px solid lighten($ui-base-color, 8%);
        border-top: 0;
      }

      .avatar img {
        border-color: $account-background-color;
      }

      @media screen and (max-width: $no-columns-breakpoint) {
        background: $account-background-color;
        border: 1px solid lighten($ui-base-color, 8%);
        border-top: 0;
      }
    }

    &__tabs {
      &__name {
        h1,
        h1 small {
          color: $white;

          @media screen and (max-width: $no-columns-breakpoint) {
            color: $primary-text-color;
          }
        }
      }
    }

    &__extra {
      .public-account-bio {
        border: 0;
      }

      .public-account-bio .account__header__fields {
        border-color: lighten($purple, 8%);
      }
    }
  }
}

.notification__filter-bar button.active::after,
.account__section-headline a.active::after {
  border-color: transparent transparent $white;
}

.hero-widget,
.box-widget,
.contact-widget,
.landing-page__information.contact-widget,
.moved-account-widget,
.memoriam-widget,
.activity-stream,
.nothing-here,
.directory__tag > a,
.directory__tag > div,
.card > a,
.page-header,
.compose-form .compose-form__warning {
  box-shadow: none;
}

body {
  background: $cream;
}

.public-layout .header,
.public-layout .public-account-header__image {
  background: $pink;
  border: 1px solid lighten($pink, 8%);
}

.public-layout .header .nav-button {
  background: darken($pink, 4%);

  &:hover,
  &:focus {
    background: darken($pink, 6%);
  }
}

.public-layout .public-account-header__bar .avatar img {
  border: 4px solid $blue;
}

.public-layout .public-account-header__bar::before {
  background: $blue;
  border: 1px solid lighten($blue, 8%);
}

.public-layout .public-account-header__tabs__tabs .counter {
  border-right: 1px solid lighten($blue, 8%);
}

.public-layout .public-account-header__tabs__tabs .counter::after {
  border-bottom: 4px solid lighten($blue, 12%);
}

.public-layout .public-account-header__image {
  background: $pink;
}

.notification__filter-bar button.active::before,
.notification__filter-bar button.active::after,
.notification__filter-bar a.active::before,
.notification__filter-bar a.active::after,
.account__section-headline button.active::before,
.account__section-headline button.active::after,
.account__section-headline a.active::before,
.account__section-headline a.active::after {
  border-color: transparent transparent $white;
}

.public-layout .footer .grid .column-2 h4 a,
.public-layout .footer,
.public-layout .footer h4,
.public-layout .footer ul a {
  color: $blueberry;
}

.public-layout .footer .brand svg {
  fill: $blueberry;
}

.account__header__image {
  background: $pink;
}

.detailed-status__wrapper {
  background: $purple;
}

a.status-card.compact:hover {
  background: $purple;
  border: 1px solid lighten($purple, 4%);
}

.column-inline-form {
  background: $blue;
  border: 1px solid lighten($blue, 4%);
}

.account {
  border-bottom: 1px solid #eeeeee;
}

.notification-favourite .status.status-direct:not(.read) {
  background: transparent;
  border-bottom: 1px solid lighten(#eeeeee, 4%);
}

.loading-indicator__figure {
  border: 0 solid lighten($green, 12%);
}

.account__header__bio .account__header__fields {
  border-top: 1px solid lighten($purple, 8%);
  border-bottom: 1px solid lighten($purple, 8%);
}

.public-account-bio .account__header__fields {
  border-bottom: 1px solid lighten($purple, 8%);
}

.account__header__fields dl {
  border-bottom: 1px solid lighten($purple, 8%);
}

@media screen and (max-width: 600px) {
  .public-layout .public-account-header__bar {
    background: $blue;
  }

  .public-layout .public-account-header__extra .public-account-bio .account__header__fields {
    border-color: lighten($purple, 8%);
    background: $purple;
  }

  .admin-wrapper .sidebar ul a,
  .admin-wrapper .sidebar ul ul a {
    border-bottom: 1px solid $blue;
  }
}

.audio-player {
  background: $ui-base-color;
  border: 1px solid lighten($ui-base-color, 8%);

  &__progress-placeholder {
    background-color: rgba(lighten($ui-highlight-color, 8%), 0.5);
  }

  &__wave-placeholder {
    background-color: lighten($ui-base-color, 16%);
  }
}

.audio-player .video-player__controls button,
.audio-player .video-player__time-sep,
.audio-player .video-player__time-current,
.audio-player .video-player__time-total {
  color: $ui-primary-color;
}

button.icon-button i.fa-retweet {
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='22' height='209'><path d='M4.97 3.16c-.1.03-.17.1-.22.18L.8 8.24c-.2.3.03.78.4.8H3.6v2.68c0 4.26-.55 3.62 3.66 3.62h7.66l-2.3-2.84c-.03-.02-.03-.04-.05-.06H7.27c-.44 0-.72-.3-.72-.72v-2.7h2.5c.37.03.63-.48.4-.77L5.5 3.35c-.12-.17-.34-.25-.53-.2zm12.16.43c-.55-.02-1.32.02-2.4.02H7.1l2.32 2.85.03.06h5.25c.42 0 .72.28.72.72v2.7h-2.5c-.36.02-.56.54-.3.8l3.92 4.9c.18.25.6.25.78 0l3.94-4.9c.26-.28 0-.83-.37-.8H18.4v-2.7c0-3.15.4-3.62-1.25-3.66z' fill='#{hex-color($action-button-color)}' stroke-width='0'/><path d='M7.78 19.66c-.24.02-.44.25-.44.5v2.46h-.06c-1.08 0-1.86-.03-2.4-.03-1.64 0-1.25.43-1.25 3.65v4.47c0 4.26-.56 3.62 3.65 3.62H8.5l-1.3-1.06c-.1-.08-.18-.2-.2-.3-.02-.17.06-.35.2-.45l1.33-1.1H7.28c-.44 0-.72-.3-.72-.7v-4.48c0-.44.28-.72.72-.72h.06v2.5c0 .38.54.63.82.38l4.9-3.93c.25-.18.25-.6 0-.78l-4.9-3.92c-.1-.1-.24-.14-.38-.12zm9.34 2.93c-.54-.02-1.3.02-2.4.02h-1.25l1.3 1.07c.1.07.18.2.2.33.02.16-.06.3-.2.4l-1.33 1.1h1.28c.42 0 .72.28.72.72v4.47c0 .42-.3.72-.72.72h-.1v-2.47c0-.3-.3-.53-.6-.47-.07 0-.14.05-.2.1l-4.9 3.93c-.26.18-.26.6 0 .78l4.9 3.92c.27.25.82 0 .8-.38v-2.5h.1c4.27 0 3.65.67 3.65-3.62v-4.47c0-3.15.4-3.62-1.25-3.66zM10.34 38.66c-.24.02-.44.25-.43.5v2.47H7.3c-1.08 0-1.86-.04-2.4-.04-1.64 0-1.25.43-1.25 3.65v4.47c0 3.66-.23 3.7 2.34 3.66l-1.34-1.1c-.1-.08-.18-.2-.2-.3 0-.17.07-.35.2-.45l1.96-1.6c-.03-.06-.04-.13-.04-.2v-4.48c0-.44.28-.72.72-.72H9.9v2.5c0 .36.5.6.8.38l4.93-3.93c.24-.18.24-.6 0-.78l-4.94-3.92c-.1-.08-.23-.13-.36-.12zm5.63 2.93l1.34 1.1c.1.07.18.2.2.33.02.16-.03.3-.16.4l-1.96 1.6c.02.07.06.13.06.22v4.47c0 .42-.3.72-.72.72h-2.66v-2.47c0-.3-.3-.53-.6-.47-.06.02-.12.05-.18.1l-4.94 3.93c-.24.18-.24.6 0 .78l4.94 3.92c.28.22.78-.02.78-.38v-2.5h2.66c4.27 0 3.65.67 3.65-3.62v-4.47c0-3.66.34-3.7-2.4-3.66zM13.06 57.66c-.23.03-.4.26-.4.5v2.47H7.28c-1.08 0-1.86-.04-2.4-.04-1.64 0-1.25.43-1.25 3.65v4.87l2.93-2.37v-2.5c0-.44.28-.72.72-.72h5.38v2.5c0 .36.5.6.78.38l4.94-3.93c.24-.18.24-.6 0-.78l-4.94-3.92c-.1-.1-.24-.14-.38-.12zm5.3 6.15l-2.92 2.4v2.52c0 .42-.3.72-.72.72h-5.4v-2.47c0-.3-.32-.53-.6-.47-.07.02-.13.05-.2.1L3.6 70.52c-.25.18-.25.6 0 .78l4.93 3.92c.28.22.78-.02.78-.38v-2.5h5.42c4.27 0 3.65.67 3.65-3.62v-4.47-.44zM19.25 78.8c-.1.03-.2.1-.28.17l-.9.9c-.44-.3-1.36-.25-3.35-.25H7.28c-1.08 0-1.86-.03-2.4-.03-1.64 0-1.25.43-1.25 3.65v.7l2.93.3v-1c0-.44.28-.72.72-.72h7.44c.2 0 .37.08.5.2l-1.8 1.8c-.25.26-.08.76.27.8l6.27.7c.28.03.56-.25.53-.53l-.7-6.25c0-.27-.3-.48-.55-.44zm-17.2 6.1c-.2.07-.36.3-.33.54l.7 6.25c.02.36.58.55.83.27l.8-.8c.02 0 .04-.02.04 0 .46.24 1.37.17 3.18.17h7.44c4.27 0 3.65.67 3.65-3.62v-.75l-2.93-.3v1.05c0 .42-.3.72-.72.72H7.28c-.15 0-.3-.03-.4-.1L8.8 86.4c.3-.24.1-.8-.27-.84l-6.28-.65h-.2zM4.88 98.6c-1.33 0-1.34.48-1.3 2.3l1.14-1.37c.08-.1.22-.17.34-.2.16 0 .34.08.44.2l1.66 2.03c.04 0 .07-.03.12-.03h7.44c.34 0 .57.2.65.5h-2.43c-.34.05-.53.52-.3.78l3.92 4.95c.18.24.6.24.78 0l3.94-4.94c.22-.27-.02-.76-.37-.77H18.4c.02-3.9.6-3.4-3.66-3.4H7.28c-1.08 0-1.86-.04-2.4-.04zm.15 2.46c-.1.03-.2.1-.28.2l-3.94 4.9c-.2.28.03.77.4.78H3.6c-.02 3.94-.45 3.4 3.66 3.4h7.44c3.65 0 3.74.3 3.7-2.25l-1.1 1.34c-.1.1-.2.17-.32.2-.16 0-.34-.08-.44-.2l-1.65-2.03c-.06.02-.1.04-.18.04H7.28c-.35 0-.57-.2-.66-.5h2.44c.37 0 .63-.5.4-.78l-3.96-4.9c-.1-.15-.3-.23-.47-.2zM4.88 117.6c-1.16 0-1.3.3-1.3 1.56l1.14-1.38c.08-.1.22-.14.34-.16.16 0 .34.04.44.16l2.22 2.75h7c.42 0 .72.28.72.72v.53h-2.6c-.3.1-.43.54-.2.78l3.92 4.9c.18.25.6.25.78 0l3.94-4.9c.22-.28-.02-.77-.37-.78H18.4v-.53c0-4.2.72-3.63-3.66-3.63H7.28c-1.08 0-1.86-.03-2.4-.03zm.1 1.74c-.1.03-.17.1-.23.16L.8 124.44c-.2.28.03.77.4.78H3.6v.5c0 4.26-.55 3.62 3.66 3.62h7.44c1.03 0 1.74.02 2.28 0-.16.02-.34-.03-.44-.15l-2.22-2.76H7.28c-.44 0-.72-.3-.72-.72v-.5h2.5c.37.02.63-.5.4-.78L5.5 119.5c-.12-.15-.34-.22-.53-.16zm12.02 10c1.2-.02 1.4-.25 1.4-1.53l-1.1 1.36c-.07.1-.17.17-.3.18zM5.94 136.6l2.37 2.93h6.42c.42 0 .72.28.72.72v1.25h-2.6c-.3.1-.43.54-.2.78l3.92 4.9c.18.25.6.25.78 0l3.94-4.9c.22-.28-.02-.77-.37-.78H18.4v-1.25c0-4.2.72-3.63-3.66-3.63H7.28c-.6 0-.92-.02-1.34-

  &:hover {
    background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='22' height='209'><path d='M4.97 3.16c-.1.03-.17.1-.22.18L.8 8.24c-.2.3.03.78.4.8H3.6v2.68c0 4.26-.55 3.62 3.66 3.62h7.66l-2.3-2.84c-.03-.02-.03-.04-.05-.06H7.27c-.44 0-.72-.3-.72-.72v-2.7h2.5c.37.03.63-.48.4-.77L5.5 3.35c-.12-.17-.34-.25-.53-.2zm12.16.43c-.55-.02-1.32.02-2.4.02H7.1l2.32 2.85.03.06h5.25c.42 0 .72.28.72.72v2.7h-2.5c-.36.02-.56.54-.3.8l3.92 4.9c.18.25.6.25.78 0l3.94-4.9c.26-.28 0-.83-.37-.8H18.4v-2.7c0-3.15.4-3.62-1.25-3.66z' fill='#{hex-color(lighten($action-button-color, 7%))}' stroke-width='0'/><path d='M7.78 19.66c-.24.02-.44.25-.44.5v2.46h-.06c-1.08 0-1.86-.03-2.4-.03-1.64 0-1.25.43-1.25 3.65v4.47c0 4.26-.56 3.62 3.65 3.62H8.5l-1.3-1.06c-.1-.08-.18-.2-.2-.3-.02-.17.06-.35.2-.45l1.33-1.1H7.28c-.44 0-.72-.3-.72-.7v-4.48c0-.44.28-.72.72-.72h.06v2.5c0 .38.54.63.82.38l4.9-3.93c.25-.18.25-.6 0-.78l-4.9-3.92c-.1-.1-.24-.14-.38-.12zm9.34 2.93c-.54-.02-1.3.02-2.4.02h-1.25l1.3 1.07c.1.07.18.2.2.33.02.16-.06.3-.2.4l-1.33 1.1h1.28c.42 0 .72.28.72.72v4.47c0 .42-.3.72-.72.72h-.1v-2.47c0-.3-.3-.53-.6-.47-.07 0-.14.05-.2.1l-4.9 3.93c-.26.18-.26.6 0 .78l4.9 3.92c.27.25.82 0 .8-.38v-2.5h.1c4.27 0 3.65.67 3.65-3.62v-4.47c0-3.15.4-3.62-1.25-3.66zM10.34 38.66c-.24.02-.44.25-.43.5v2.47H7.3c-1.08 0-1.86-.04-2.4-.04-1.64 0-1.25.43-1.25 3.65v4.47c0 3.66-.23 3.7 2.34 3.66l-1.34-1.1c-.1-.08-.18-.2-.2-.3 0-.17.07-.35.2-.45l1.96-1.6c-.03-.06-.04-.13-.04-.2v-4.48c0-.44.28-.72.72-.72H9.9v2.5c0 .36.5.6.8.38l4.93-3.93c.24-.18.24-.6 0-.78l-4.94-3.92c-.1-.08-.23-.13-.36-.12zm5.63 2.93l1.34 1.1c.1.07.18.2.2.33.02.16-.03.3-.16.4l-1.96 1.6c.02.07.06.13.06.22v4.47c0 .42-.3.72-.72.72h-2.66v-2.47c0-.3-.3-.53-.6-.47-.06.02-.12.05-.18.1l-4.94 3.93c-.24.18-.24.6 0 .78l4.94 3.92c.28.22.78-.02.78-.38v-2.5h2.66c4.27 0 3.65.67 3.65-3.62v-4.47c0-3.66.34-3.7-2.4-3.66zM13.06 57.66c-.23.03-.4.26-.4.5v2.47H7.28c-1.08 0-1.86-.04-2.4-.04-1.64 0-1.25.43-1.25 3.65v4.87l2.93-2.37v-2.5c0-.44.28-.72.72-.72h5.38v2.5c0 .36.5.6.78.38l4.94-3.93c.24-.18.24-.6 0-.78l-4.94-3.92c-.1-.1-.24-.14-.38-.12zm5.3 6.15l-2.92 2.4v2.52c0 .42-.3.72-.72.72h-5.4v-2.47c0-.3-.32-.53-.6-.47-.07.02-.13.05-.2.1L3.6 70.52c-.25.18-.25.6 0 .78l4.93 3.92c.28.22.78-.02.78-.38v-2.5h5.42c4.27 0 3.65.67 3.65-3.62v-4.47-.44zM19.25 78.8c-.1.03-.2.1-.28.17l-.9.9c-.44-.3-1.36-.25-3.35-.25H7.28c-1.08 0-1.86-.03-2.4-.03-1.64 0-1.25.43-1.25 3.65v.7l2.93.3v-1c0-.44.28-.72.72-.72h7.44c.2 0 .37.08.5.2l-1.8 1.8c-.25.26-.08.76.27.8l6.27.7c.28.03.56-.25.53-.53l-.7-6.25c0-.27-.3-.48-.55-.44zm-17.2 6.1c-.2.07-.36.3-.33.54l.7 6.25c.02.36.58.55.83.27l.8-.8c.02 0 .04-.02.04 0 .46.24 1.37.17 3.18.17h7.44c4.27 0 3.65.67 3.65-3.62v-.75l-2.93-.3v1.05c0 .42-.3.72-.72.72H7.28c-.15 0-.3-.03-.4-.1L8.8 86.4c.3-.24.1-.8-.27-.84l-6.28-.65h-.2zM4.88 98.6c-1.33 0-1.34.48-1.3 2.3l1.14-1.37c.08-.1.22-.17.34-.2.16 0 .34.08.44.2l1.66 2.03c.04 0 .07-.03.12-.03h7.44c.34 0 .57.2.65.5h-2.43c-.34.05-.53.52-.3.78l3.92 4.95c.18.24.6.24.78 0l3.94-4.94c.22-.27-.02-.76-.37-.77H18.4c.02-3.9.6-3.4-3.66-3.4H7.28c-1.08 0-1.86-.04-2.4-.04zm.15 2.46c-.1.03-.2.1-.28.2l-3.94 4.9c-.2.28.03.77.4.78H3.6c-.02 3.94-.45 3.4 3.66 3.4h7.44c3.65 0 3.74.3 3.7-2.25l-1.1 1.34c-.1.1-.2.17-.32.2-.16 0-.34-.08-.44-.2l-1.65-2.03c-.06.02-.1.04-.18.04H7.28c-.35 0-.57-.2-.66-.5h2.44c.37 0 .63-.5.4-.78l-3.96-4.9c-.1-.15-.3-.23-.47-.2zM4.88 117.6c-1.16 0-1.3.3-1.3 1.56l1.14-1.38c.08-.1.22-.14.34-.16.16 0 .34.04.44.16l2.22 2.75h7c.42 0 .72.28.72.72v.53h-2.6c-.3.1-.43.54-.2.78l3.92 4.9c.18.25.6.25.78 0l3.94-4.9c.22-.28-.02-.77-.37-.78H18.4v-.53c0-4.2.72-3.63-3.66-3.63H7.28c-1.08 0-1.86-.03-2.4-.03zm.1 1.74c-.1.03-.17.1-.23.16L.8 124.44c-.2.28.03.77.4.78H3.6v.5c0 4.26-.55 3.62 3.66 3.62h7.44c1.03 0 1.74.02 2.28 0-.16.02-.34-.03-.44-.15l-2.22-2.76H7.28c-.44 0-.72-.3-.72-.72v-.5h2.5c.37.02.63-.5.4-.78L5.5 119.5c-.12-.15-.34-.22-.53-.16zm12.02 10c1.2-.02 1.4-.25 1.4-1.53l-1.1 1.36c-.07.1-.17.17-.3.18zM5.94 136.6l2.37 2.93h6.42c.42 0 .72.28.72.72v1.25h-2.6c-.3.1-.43.54-.2.78l3.92 4.9c.18.25.6.25.78 0l3.94-4.9c.22-.28-.02-.77-.37-.78H18.4v-1.25c0-4.2.72-3.63-3.66-3.63H7.28c-.6 
  }
}

.status-private button.icon-button i.fa-retweet {
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' height='209' width='22'><path d='M 4.9707031 3.1503906 L 4.9707031 3.1601562 C 4.8707031 3.1901563 4.8 3.2598438 4.75 3.3398438 L 0.80078125 8.2402344 C 0.60078125 8.5402344 0.8292187 9.0190625 1.1992188 9.0390625 L 3.5996094 9.0390625 L 3.5996094 11.720703 C 3.5996094 15.980703 3.0497656 15.339844 7.2597656 15.339844 L 11.869141 15.339844 L 11.869141 14.119141 L 11.869141 13.523438 L 11.869141 12.441406 C 11.869141 12.441406 11.869141 12.439453 11.869141 12.439453 L 7.2695312 12.439453 C 6.8295312 12.439453 6.5507814 12.140703 6.5507812 11.720703 L 6.5507812 9.0195312 L 9.0507812 9.0195312 C 9.4207813 9.0495313 9.6792188 8.54 9.4492188 8.25 L 5.5 3.3496094 C 5.38 3.1796094 5.1607031 3.1003906 4.9707031 3.1503906 z M 17.150391 3.5800781 L 17.130859 3.5898438 C 16.580859 3.5698436 15.810469 3.609375 14.730469 3.609375 L 7.0996094 3.609375 L 9.4199219 6.4609375 L 9.4492188 6.5195312 L 14.699219 6.5195312 C 15.106887 6.5195312 15.397113 6.7872181 15.414062 7.2050781 C 15.738375 7.0991315 16.077769 7.0273437 16.435547 7.0273438 L 16.578125 7.0273438 C 17.24903 7.0273438 17.874081 7.2325787 18.400391 7.578125 L 18.400391 7.2402344 C 18.400391 4.0902344 18.800391 3.6200781 17.150391 3.5800781 z M 16.435547 8.0273438 C 15.143818 8.0273438 14.083984 9.0851838 14.083984 10.376953 L 14.083984 11.607422 L 13.570312 11.607422 C 13.375448 11.607422 13.210603 11.704118 13.119141 11.791016 C 13.027691 11.877916 12.983569 11.958238 12.951172 12.03125 C 12.886382 12.177277 12.867187 12.304789 12.867188 12.441406 L 12.867188 13.523438 L 12.867188 14.119141 L 12.867188 15.677734 L 12.867188 16.509766 L 13.570312 16.509766 L 19.472656 16.509766 L 20.173828 16.509766 L 20.173828 15.677734 L 20.173828 13.523438 L 20.173828 12.441406 C 20.173828 12.304794 20.156597 12.177281 20.091797 12.03125 C 20.059397 11.95824 20.015299 11.877916 19.923828 11.791016 C 19.832368 11.704116 19.667509 11.607422 19.472656 11.607422 L 18.927734 11.607422 L 18.927734 10.376953 C 18.927734 9.0851838 17.867902 8.0273438 16.576172 8.0273438 L 16.435547 8.0273438 z M 16.435547 9.2207031 L 16.576172 9.2207031 C 17.22782 9.2207031 17.734375 9.7251013 17.734375 10.376953 L 17.734375 11.607422 L 15.277344 11.607422 L 15.277344 10.376953 C 15.277344 9.7251013 15.7839 9.2207031 16.435547 9.2207031 z M 12.919922 9.9394531 C 12.559922 9.9594531 12.359141 10.480234 12.619141 10.740234 L 12.751953 10.904297 C 12.862211 10.870135 12.980058 10.842244 13.085938 10.802734 L 13.085938 10.378906 C 13.085938 10.228632 13.111295 10.084741 13.130859 9.9394531 L 12.919922 9.9394531 z M 19.882812 9.9394531 C 19.902378 10.084741 19.927734 10.228632 19.927734 10.378906 L 19.927734 10.791016 C 20.168811 10.875098 20.455966 10.916935 20.613281 11.066406 C 20.691227 11.140457 20.749315 11.223053 20.806641 11.302734 L 21.259766 10.740234 C 21.519766 10.460234 21.260625 9.9094531 20.890625 9.9394531 L 19.882812 9.9394531 z M 16.435547 10.220703 C 16.301234 10.220703 16.277344 10.244432 16.277344 10.378906 L 16.277344 10.607422 L 16.734375 10.607422 L 16.734375 10.378906 C 16.734375 10.244433 16.712442 10.220703 16.578125 10.220703 L 16.435547 10.220703 z ' fill='#{hex-color($action-button-color)}' stroke-width='0'/><path d='M 7.7792969 19.650391 L 7.7792969 19.660156 C 7.5392969 19.680156 7.3398437 19.910156 7.3398438 20.160156 L 7.3398438 22.619141 L 7.2792969 22.619141 C 6.1992969 22.619141 5.4208594 22.589844 4.8808594 22.589844 C 3.2408594 22.589844 3.6308594 23.020234 3.6308594 26.240234 L 3.6308594 30.710938 C 3.6308594 34.970937 3.0692969 34.330078 7.2792969 34.330078 L 8.5 34.330078 L 7.1992188 33.269531 C 7.0992188 33.189531 7.02 33.070703 7 32.970703 C 6.98 32.800703 7.0592186 32.619531 7.1992188 32.519531 L 8.5292969 31.419922 L 7.2792969 31.419922 C 6.8392969 31.419922 6.5605469 31.120703 6.5605469 30.720703 L 6.5605469 26.240234 C 6.5605469 25.800234 6.8392969 25.519531 7.2792969 25.519531 L 7.3398438 25.519531 L 7.3398438 28.019531 C 7.3398438 28.399531 7.8801564 28.650391 8.1601562 28.400391

  &:hover {
    background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' height='209' width='22'><path d='M 4.9707031 3.1503906 L 4.9707031 3.1601562 C 4.8707031 3.1901563 4.8 3.2598438 4.75 3.3398438 L 0.80078125 8.2402344 C 0.60078125 8.5402344 0.8292187 9.0190625 1.1992188 9.0390625 L 3.5996094 9.0390625 L 3.5996094 11.720703 C 3.5996094 15.980703 3.0497656 15.339844 7.2597656 15.339844 L 11.869141 15.339844 L 11.869141 14.119141 L 11.869141 13.523438 L 11.869141 12.441406 C 11.869141 12.441406 11.869141 12.439453 11.869141 12.439453 L 7.2695312 12.439453 C 6.8295312 12.439453 6.5507814 12.140703 6.5507812 11.720703 L 6.5507812 9.0195312 L 9.0507812 9.0195312 C 9.4207813 9.0495313 9.6792188 8.54 9.4492188 8.25 L 5.5 3.3496094 C 5.38 3.1796094 5.1607031 3.1003906 4.9707031 3.1503906 z M 17.150391 3.5800781 L 17.130859 3.5898438 C 16.580859 3.5698436 15.810469 3.609375 14.730469 3.609375 L 7.0996094 3.609375 L 9.4199219 6.4609375 L 9.4492188 6.5195312 L 14.699219 6.5195312 C 15.106887 6.5195312 15.397113 6.7872181 15.414062 7.2050781 C 15.738375 7.0991315 16.077769 7.0273437 16.435547 7.0273438 L 16.578125 7.0273438 C 17.24903 7.0273438 17.874081 7.2325787 18.400391 7.578125 L 18.400391 7.2402344 C 18.400391 4.0902344 18.800391 3.6200781 17.150391 3.5800781 z M 16.435547 8.0273438 C 15.143818 8.0273438 14.083984 9.0851838 14.083984 10.376953 L 14.083984 11.607422 L 13.570312 11.607422 C 13.375448 11.607422 13.210603 11.704118 13.119141 11.791016 C 13.027691 11.877916 12.983569 11.958238 12.951172 12.03125 C 12.886382 12.177277 12.867187 12.304789 12.867188 12.441406 L 12.867188 13.523438 L 12.867188 14.119141 L 12.867188 15.677734 L 12.867188 16.509766 L 13.570312 16.509766 L 19.472656 16.509766 L 20.173828 16.509766 L 20.173828 15.677734 L 20.173828 13.523438 L 20.173828 12.441406 C 20.173828 12.304794 20.156597 12.177281 20.091797 12.03125 C 20.059397 11.95824 20.015299 11.877916 19.923828 11.791016 C 19.832368 11.704116 19.667509 11.607422 19.472656 11.607422 L 18.927734 11.607422 L 18.927734 10.376953 C 18.927734 9.0851838 17.867902 8.0273438 16.576172 8.0273438 L 16.435547 8.0273438 z M 16.435547 9.2207031 L 16.576172 9.2207031 C 17.22782 9.2207031 17.734375 9.7251013 17.734375 10.376953 L 17.734375 11.607422 L 15.277344 11.607422 L 15.277344 10.376953 C 15.277344 9.7251013 15.7839 9.2207031 16.435547 9.2207031 z M 12.919922 9.9394531 C 12.559922 9.9594531 12.359141 10.480234 12.619141 10.740234 L 12.751953 10.904297 C 12.862211 10.870135 12.980058 10.842244 13.085938 10.802734 L 13.085938 10.378906 C 13.085938 10.228632 13.111295 10.084741 13.130859 9.9394531 L 12.919922 9.9394531 z M 19.882812 9.9394531 C 19.902378 10.084741 19.927734 10.228632 19.927734 10.378906 L 19.927734 10.791016 C 20.168811 10.875098 20.455966 10.916935 20.613281 11.066406 C 20.691227 11.140457 20.749315 11.223053 20.806641 11.302734 L 21.259766 10.740234 C 21.519766 10.460234 21.260625 9.9094531 20.890625 9.9394531 L 19.882812 9.9394531 z M 16.435547 10.220703 C 16.301234 10.220703 16.277344 10.244432 16.277344 10.378906 L 16.277344 10.607422 L 16.734375 10.607422 L 16.734375 10.378906 C 16.734375 10.244433 16.712442 10.220703 16.578125 10.220703 L 16.435547 10.220703 z ' fill='#{hex-color(lighten($action-button-color, 7%))}' stroke-width='0'/><path d='M 7.7792969 19.650391 L 7.7792969 19.660156 C 7.5392969 19.680156 7.3398437 19.910156 7.3398438 20.160156 L 7.3398438 22.619141 L 7.2792969 22.619141 C 6.1992969 22.619141 5.4208594 22.589844 4.8808594 22.589844 C 3.2408594 22.589844 3.6308594 23.020234 3.6308594 26.240234 L 3.6308594 30.710938 C 3.6308594 34.970937 3.0692969 34.330078 7.2792969 34.330078 L 8.5 34.330078 L 7.1992188 33.269531 C 7.0992188 33.189531 7.02 33.070703 7 32.970703 C 6.98 32.800703 7.0592186 32.619531 7.1992188 32.519531 L 8.5292969 31.419922 L 7.2792969 31.419922 C 6.8392969 31.419922 6.5605469 31.120703 6.5605469 30.720703 L 6.5605469 26.240234 C 6.5605469 25.800234 6.8392969 25.519531 7.2792969 25.519531 L 7.3398438 25.519531 L 7.3398438 28.019531 C 7.3398438 28.399531 7.8801564 28.650391 8.16
  }
}

button.icon-button.disabled i.fa-retweet {
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' height='209' width='22'><path d='M 18.972656 1.2011719 C 18.829825 1.1881782 18.685932 1.2302188 18.572266 1.3300781 L 15.990234 3.5996094 C 15.58109 3.6070661 15.297269 3.609375 14.730469 3.609375 L 7.0996094 3.609375 L 9.4199219 6.4609375 L 9.4492188 6.5195312 L 12.664062 6.5195312 L 6.5761719 11.867188 C 6.5674697 11.818249 6.5507813 11.773891 6.5507812 11.720703 L 6.5507812 9.0195312 L 9.0507812 9.0195312 C 9.4207813 9.0495313 9.6792188 8.54 9.4492188 8.25 L 5.5 3.3496094 C 5.38 3.1796094 5.1607031 3.1003906 4.9707031 3.1503906 L 4.9707031 3.1601562 C 4.8707031 3.1901563 4.8 3.2598438 4.75 3.3398438 L 0.80078125 8.2402344 C 0.60078125 8.5402344 0.8292187 9.0190625 1.1992188 9.0390625 L 3.5996094 9.0390625 L 3.5996094 11.720703 C 3.5996094 13.045739 3.5690668 13.895038 3.6503906 14.4375 L 2.6152344 15.347656 C 2.3879011 15.547375 2.3754917 15.901081 2.5859375 16.140625 L 3.1464844 16.78125 C 3.3569308 17.020794 3.7101667 17.053234 3.9375 16.853516 L 19.892578 2.8359375 C 20.119911 2.6362188 20.134275 2.282513 19.923828 2.0429688 L 19.361328 1.4023438 C 19.256105 1.282572 19.115488 1.2141655 18.972656 1.2011719 z M 18.410156 6.7753906 L 15.419922 9.4042969 L 15.419922 9.9394531 L 14.810547 9.9394531 L 13.148438 11.400391 L 16.539062 15.640625 C 16.719062 15.890625 17.140313 15.890625 17.320312 15.640625 L 21.259766 10.740234 C 21.519766 10.460234 21.260625 9.9094531 20.890625 9.9394531 L 18.400391 9.9394531 L 18.400391 7.2402344 C 18.400391 7.0470074 18.407711 6.9489682 18.410156 6.7753906 z M 11.966797 12.439453 L 8.6679688 15.339844 L 14.919922 15.339844 L 12.619141 12.5 C 12.589141 12.48 12.590313 12.459453 12.570312 12.439453 L 11.966797 12.439453 z' fill='#{hex-color(darken($action-button-color, 13%))}' stroke-width='0'/></svg>");
}

.report-dialog-modal {
  background: $white;
}

.compose-form__upload__warning > button {
  color: $white !important;
}

.dropdown-menu__item.edited-timestamp__history__item {
  border-bottom: 1px solid lighten($purple, 16%);

  &.dropdown-menu__item--text,
  button {
    background: $white;
  }
}

#navigation-panel__publish {
  i {
    color: $ui-base-lighter-color;
  }
}

#navigation-panel__publish.active {
  i {
    background-color: darken($ui-highlight-color, 20%);
    color: darken($ui-highlight-color, 30%);
  }
}

// Tablet layout
@media screen and (max-width: $no-gap-breakpoint - 1px) {
  .tabs-bar__wrapper {
    z-index: 2;
  }

  .columns-area--mobile {
    z-index: 0;
  }

  .column-header {
    box-sizing: border-box;
    height: 48px;
  }
}

// Mobile layout
@media screen and (max-width: $no-gap-breakpoint - 285px - 1px) {
  .tabs-bar__wrapper {
    z-index: 2;
  }

  .columns-area--mobile {
    z-index: 0;
  }

  .column-header {
    box-sizing: border-box;
    height: 48px;
  }
}

.rules-list {
  background-color: $cream;
}

.button.button-tertiary {
  color: $darker-text-color;
}