:host(us-currencies-switcher) {
  display: inline-block;
  font-size: 0;
  line-height: 0;

  .currencies-switcher {
    .currency-icon {
      display: inline-block;
      width: 100%;
      height: 100%;
      padding-right: var(--space-inner-xs);

      svg {
        width: 16px;
        height: 16px;
      }
    }

    &__container {
      display: flex;
      flex-direction: column;
      width: 100%;
      height: 100%;

      .switcher-body {
        display: flex;
        flex-direction: column;
        flex: 1;
        padding: var(--space-inner-xl);

        .switcher-loader {
          display: flex;
          flex: 1;
          width: 100%;
          align-items: center;
        }

        .main-text {
          margin-bottom: var(--space-inline-xl);
          font: var(--text-p-m-light);
          color: var(--color-text-900);
        }
      }
    }

    &__container-item {
      display: flex;
      align-items: flex-start;
      justify-content: space-between;
      gap: var(--space-outer-s);
      width: 100%;
      margin-bottom: var(--space-inline-m);
      border-left: 2px solid var(--color-neutral-100);
      padding: var(--space-inner-l) var(--space-inner-xl);
      background-color: var(--color-neutral-100);
      border-radius: var(--border-radius-m);
      cursor: pointer;
      transition: 0.3s;

      &.active_switcher {
        background-color: var(--color-primary-100);
        border-left-color: var(--color-primary-600);
      }

      &:hover {
        background-color: var(--color-primary-100);
      }
    }

    &__item-currency {
      display: flex;
      justify-content: flex-start;

      .img-container {
        width: 20px;
        height: 20px;
        border-radius: 50%;
        margin-right: var(--space-inline-m);
        display: inline-block;

        img,
        svg {
          width: 100%;
          height: 100%;
          object-fit: contain;
        }
      }

      span {
        font: var(--text-p-m-heavy);
        color: var(--color-neutral-1000);
        text-transform: uppercase;
      }
    }

    &__item-total {
      display: flex;
      flex-direction: column;
      justify-content: center;
      align-items: flex-end;

      .item-total-amount {
        margin-bottom: var(--space-inline-xs);
        text-align: right;
      }
    }

    &__item-pay-receive {
      display: flex;
      flex: 1;
      gap: var(--space-inline-m);

      .section {
        display: flex;
        flex-direction: column;
        align-items: flex-end;
        min-width: 70px;
        width: 100%;
      }
    }

    &__item-total,
    &__item-pay-receive {
      span {
        font: var(--text-p-m-heavy);
        color: var(--color-neutral-1000);
      }

      p {
        font: var(--text-p-s-light);
        color: var(--color-text-900);
      }
    }

    &__footer {
      padding: calc(var(--space-inner-l) - 1px) var(--space-inner-xl) var(--space-inner-l) var(--space-inner-xl);
      background-color: var(--color-neutral-0);
      border-top: 1px solid var(--color-neutral-300);
    }
  }
}