@import '../../../styles/variables';

.sendPanelHeader {
  display: flex;
  justify-content: space-between;
  align-items: center;
  flex: 1;

  .sendPanelHeaderInfo {
    display: flex;
    flex: 0.5;
  }

  .sendPanelHeaderInfo,
  .sendPanelRecipients {
    color: var(--panel-header-text);
  }

  .sendPanelRecipients {
    margin-left: 15px;
  }

  .sendPanelHeaderButtons {
    display: flex;
    flex: 0.5;
    justify-content: flex-end;
  }

  .priorityTrasferHeaderTextContainer {
    align-items: center;
    justify-content: center;
    display: flex;
    flex: 0.2;

    font-size: 14px;
    color: var(--button-priority-standard-icon-color);
    font-family: var(--font-gotham-bold);
    svg {
      margin-right: 10px;
      g {
        fill: #3bfdab !important;
      }
    }
  }

  .sendPanelHeaderButton {
    border: none;
    background: transparent;
    padding: 8px;
    display: flex;
    margin-right: 10px;
    align-items: center;
    font-size: 1rem;
    color: var(--base-text);
    align-items: center;
    cursor: pointer;

    &[disabled] {
      cursor: default;
      opacity: 0.6;
    }

    .sendPanelHeaderButtonIcon {
      color: var(--panel-header-text);
      margin-right: 10px;
    }
    svg {
      width: 24px;

      path {
        fill: var(--panel-icon);
      }
    }
  }
}

.enterQrHeaderButton {
  @extend .sendPanelHeaderButton;
  margin-right: 5px;
}

.disabledFeature {
  display: flex !important;
  cursor: default;
}

.confirmButtonsContainer {
  display: flex;
  justify-content: center;
  width: 450px;
  margin: auto;

  button {
    width: 200px;
  }
}

.confirmationFees {
  display: flex;
  flex-direction: column;
  margin-top: 10px;
  font-family: var(--font-gotham-book);
  font-size: 12px;
  color: #8d98ae;
  text-align: center;
  width: 450px;
  margin: auto;

  p {
    width: 190px;
    text-align: center;
    align-self: flex-end;
    padding: 0 15px;
  }
}

.generateTransactionButton {
  width: 450px;
  margin: 12px auto;
}

.sendFormButton {
  width: 450px;
  margin: 12px auto 36px auto;
}

.confirmButtonsContainer {
  display: flex;
  justify-content: center;
}

.confirmSendButtons {
  margin: 0 15px;
  width: 200px;
}

.sendSuccessContent {
  padding: 0;
}

.sendSuccessPanel {
  height: 100%;
  overflow-y: auto;
}

.priorityExplanationText {
  text-transform: uppercase;
  font-size: 14px;
  text-align: left;
  opacity: 0.5;
  font-family: var(--font-gotham-bold);
  font-size: 12px;
  margin-bottom: 10px;
}

.priorityFeeContainer {
  display: flex;
  flex-direction: column;
  width: 450px;
  margin: auto;
  margin-top: 36px;
  margin-bottom: 36px;
}

.priorityFeeButtonContainer {
  display: flex;
  justify-content: center;

  .feeCost {
    font-size: 11px;
    font-weight: 100 !important;
  }

  .speed {
    font-weight: 400;
  }

  button:first-child {
    border-radius: 4px 0 0 4px;
    border-right: none !important;
    display: flex;
    flex: 2.25;
  }
  button:nth-child(2) {
    border-radius: 0;
    border-right: none !important;
    display: flex;
    flex: 2;
  }
  button:nth-child(3) {
    border-radius: 0 4px 4px 0;
    display: flex;
    flex: 1.5;
  }
  button {
    margin: 0;
    border: solid thin #8d98ae !important;
  }
}

.migrationButtonContainer {
  // margin-top: 75px;
  display: flex;
  justify-content: flex-end;
  width: 100%;
  margin-top: -54px;

  button {
    max-width: 212px;
    margin: unset;
  }
}

.migrationContent {
  flex-direction: column;
  flex: 1;
  display: flex;
}
