.create-channel {
  margin: 0 var(--sp-normal);
  margin-right: var(--sp-extra-tight);

  &__form > * {
    margin-top: var(--sp-normal);
    &:first-child {
      margin-top: var(--sp-extra-tight);
    }
  }

  &__address {
    display: flex;
    &__label {
      color: var(--tc-surface-low);
      margin-bottom: var(--sp-ultra-tight);
    }
    &__tip {
      margin-left: 46px;
      margin-top: var(--sp-ultra-tight);
      [dir=rtl] & {
        margin-left: 0;
        margin-right: 46px;
      }
    }
    & .text {
      display: flex;
      align-items: center;
      padding: 0 var(--sp-normal);
      border: 1px solid var(--bg-surface-border);
      border-radius: var(--bo-radius);
      color: var(--tc-surface-low);
    }
    & *:nth-child(2) {
      flex: 1;
      min-width: 0;
      & .input {
        border-radius: 0;
      }
    }
    & .text:first-child {
      border-right-width: 0;
      border-radius: var(--bo-radius) 0 0 var(--bo-radius);
    }
    & .text:last-child {
      border-left-width: 0;
      border-radius: 0 var(--bo-radius) var(--bo-radius) 0;
    }
    [dir=rtl] & {
      & .text:first-child {
        border-left-width: 0;
        border-right-width: 1px;
        border-radius: 0 var(--bo-radius) var(--bo-radius) 0;
      }
      & .text:last-child {
        border-right-width: 0;
        border-left-width: 1px;
        border-radius: var(--bo-radius) 0 0 var(--bo-radius);
      }
    }
  }

  &__name-wrapper {
    display: flex;
    align-items: flex-end;

    & .input-container {
      flex: 1;
      min-width: 0;
      margin-right: var(--sp-normal);
      [dir=rtl] & {
        margin-right: 0;
        margin-left: var(--sp-normal);
      }
    }
    & .btn-primary {
      padding-top: 11px;
      padding-bottom: 11px;
    }
  }

  &__loading {
    display: flex;
    justify-content: center;
    align-items: center;
    & .text {
      margin-left: var(--sp-normal);
      [dir=rtl] & {
        margin-left: 0;
        margin-right: var(--sp-normal);
      }
    }
  }
  &__error {
    text-align: center;
    color: var(--bg-danger) !important;
  }

  [dir=rtl] & {
    margin-right: var(--sp-normal);
    margin-left: var(--sp-extra-tight);
  }
}