@use '@gear-js/ui/mixins' as *;
@use '@/shared/assets/styles/shared' as *;
@use '@/shared/assets/styles/mixins' as *;
@use '@/shared/assets/styles/variables' as *;
@use '@/shared/assets/styles/animations' as *;

.topSide {
  display: flex;
  position: relative;
  align-items: center;
}

.leftSide {
  @include fadeAppear();
  @include childrenMargin($margineLarge, right);

  display: flex;
  align-items: center;
}

.rightSide {
  @include childrenMargin(16px, right);
  display: flex;
  align-items: center;
  margin-left: auto;

  .privateContent {
    @include fadeAppear();
    @include childrenMargin(16px, right);
    display: flex;
    align-items: center;

    .testBalanceBtn {
      background-color: $green007;

      svg path {
        @include transition();

        fill: $successColor;
      }

      &:hover {
        background-color: $successColor;

        svg path {
          @include transition();

          fill: $textColor;
        }
      }
    }
  }
}