/* 🦥 GoToSocial */

/* Variables */
:root {
  --drawer-border-radius: var(--size-layout-radius);
  --button-border-radius: var(--size-ui-radius);
}

/* Icons debug */
.fa {
  background: red;
}

/* Diff */
.gts-icon {
  display: inline-block;
  flex-shrink: 0;
  width: var(--size-icon);
  height: var(--size-icon);
}

.gts-icon-with-badge {
  position: relative;
  display: block;

  &__badge {
    --size: 20px;

    position: absolute;
    top: -10px;
    right: -10px;
    display: flex;
    align-items: center;
    justify-content: center;
    padding-inline: 4px;
    min-width: var(--size);
    height: var(--size);
    box-sizing: border-box;
    border: 2px solid var(--color-bg);
    border-radius: 50%;
    color: var(--color-badge-fg);
    font-size: 10px;
    font-weight: 500;
    background: var(--color-badge-bg);
  }

  &__issue-badge {
    position: absolute;
    background: $error-red;
  }

  .gts-icon {
    display: block;
  }
}

.drawer__tab .gts-icon,
.column-header .gts-icon,
.column-link .gts-icon,
.local-settings__navigation__item .gts-icon {
  --size-icon: 24px;
}

.navigation-panel {
  justify-content: start;
}

.column-header__icon {
  margin: 0;
}

.column-link {
  display: flex;
  align-items: center;
  gap: 10px;
}

.column-link__icon {
  margin: 0;
}

.search__icon > svg {
  display: none;
  position: absolute;
  top: 16px;
  inset-inline-end: 10px;
  width: 18px;
  height: 18px;
  color: $secondary-text-color;

  &.active {
    display: block;
  }
}

.notification__filter-bar svg.gts-icon,
.status__info__icons svg.gts-icon {
  --size-icon: 18px;
}

.detailed-status__meta {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 1ch;
}

.column-header__back-button,
.column-back-button,
.detailed-status__link {
  display: flex;
  align-items: center;
}

.column-back-button--slim-button svg {
  margin-block: -3px;
}

.detailed-status__meta svg {
  --size-icon: 16px;
}

.notification__favourite-icon-wrapper svg {
  --size-icon: 16px;

  color: $highlight-text-color;
}

.drawer__pager {
  flex-grow: unset;
}

.drawer__inner {
  position: relative;
  top: unset;
}

.drawer__inner__mastodon,
.drawer__inner.darker {
  display: none;
}