/*
 * https://github.com/morethanwords/tweb
 * Copyright (C) 2019-2021 Eduard Kuzmenko
 * https://github.com/morethanwords/tweb/blob/master/LICENSE
 */

.usernames {
  &-username {
    &-icon {
      border-radius: 50%;
      background-color: var(--secondary-color);
      color: #fff;
      font-size: 1.25rem;
      position: relative;

      &-svg {
        // --stroke-offset: 0;
        position: absolute;
        width: 51px;
        height: 51px;
        transform: scaleX(-1) rotate(270deg);
      }

      &-circle {
        fill: none;
        stroke-width: 2px;
        stroke: var(--color);
        stroke-linecap: round;

        @include animation-level(2) {
          transition: stroke-dasharray var(--transition-standard-in);
        }
      }
    }

    &.active {
      &:not(.is-link) .usernames-username-status {
        color: var(--primary-color) !important;
      }

      .usernames-username-icon {
        background-color: var(--primary-color);
      }
    }

    &.is-paid {
      .usernames-username-icon {
        font-size: 1.625rem;
      }
    }
  }
}
