.pso-notif {
    display: flex;
    align-items: stretch;

    @include mq($from: desktop) {
      position: relative;
    }
}

.pso-notif__toggle {
    position: relative;
    display: flex;
    align-items: center;
    padding: var(--G2);
    font-size: var(--F);
    color: var(--c-contrast-slight);

    .pso-badge--float {
        top: calc(var(--G1) * -1);
        right: calc(var(--G1) * -1);
    }

    @include mq($from: desktop) {
        transition: var(--TRANS);

        &:hover {
          color: var(--c-contrast);
        }

        &:focus {
          color: var(--c-contrast-slight);
        }
    }
}

.pso-notif--friends {
  order: 1;
}

.pso-notif--messages {
  order: 2;
}

.pso-notif--general {
  order: 3;
}