@use '../../../shared-styles/settings/variables';
@use '../../../shared-styles/objects/link';
@use '../../../shared-styles/objects/text';
@use '../../molecules/VerificationStep/components.verification-step';

.buv-c-final-verification-step {
  white-space: nowrap;
  opacity: 0;
  position: relative;
  font-weight: 600;
  font-size: 15px;
  color: variables.$fontColor;
  margin-top: 15px;
}

.buv-c-final-verification-step.is-success {
  font-size: 21px;
  color: variables.$successColor;
  line-height: 19px;
}

.buv-c-final-verification-step.is-test,
.buv-c-final-verification-step--standalone.is-success {
  font-size: 15px;
  color: variables.$fontColor;
}

.buv-c-final-verification-step.is-failure {
  font-size: 13px;
  font-weight: 400;
}

.buv-c-verification-step__description {
  margin: 0;
}

.buv-c-final-verification-step.is-visible {
  opacity: 1;
}

.buv-c-final-verification-step.is-visible::after {
  opacity: 1;
}

.buv-c-final-verification-step::after {
  position: absolute;
  content: '';
  height: 26px;
  width: 23px;
  left: -37px;
  top: -3px;
  background-image: url('data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iMjBweCIgaGVpZ2h0PSIyM3B4IiB2aWV3Qm94PSIwIDAgMjAgMjMiIHZlcnNpb249IjEuMSIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIiB4bWxuczp4bGluaz0iaHR0cDovL3d3dy53My5vcmcvMTk5OS94bGluayI+CiAgICA8ZyBpZD0iVmVyaWZpY2F0aW9uIiBzdHJva2U9Im5vbmUiIHN0cm9rZS13aWR0aD0iMSIgZmlsbD0ibm9uZSIgZmlsbC1ydWxlPSJldmVub2RkIj4KICAgICAgICA8ZyBpZD0iMyIgdHJhbnNmb3JtPSJ0cmFuc2xhdGUoLTI1NC4wMDAwMDAsIC00NzQuMDAwMDAwKSIgZmlsbD0iIzJBQjI3QiI+CiAgICAgICAgICAgIDxnIGlkPSJHcm91cCIgdHJhbnNmb3JtPSJ0cmFuc2xhdGUoMjQ4LjAwMDAwMCwgNDY5LjAwMDAwMCkiPgogICAgICAgICAgICAgICAgPHBhdGggZD0iTTE2LDUgTDYsOS4xODE4MTgxOCBMNiwxNS40NTQ1NDU1IEM2LDIxLjI1NjgxODIgMTAuMjY2NjY2NywyNi42ODI3MjczIDE2LDI4IEMyMS43MzMzMzMzLDI2LjY4MjcyNzMgMjYsMjEuMjU2ODE4MiAyNiwxNS40NTQ1NDU1IEwyNiw5LjE4MTgxODE4IEwxNiw1IEwxNiw1IFogTTksMTcuNzUzNzE1NSBMMTAuNTI3NSwxNi4yNTY5MDAyIEwxMy4zMzMzMzMzLDE4Ljk5NTc1MzcgTDIwLjQ3MjUsMTIgTDIyLDEzLjUwNzQzMSBMMTMuMzMzMzMzMywyMiBMOSwxNy43NTM3MTU1IFoiIGlkPSJTaGFwZSI+PC9wYXRoPgogICAgICAgICAgICA8L2c+CiAgICAgICAgPC9nPgogICAgPC9nPgo8L3N2Zz4=');
  background-repeat: no-repeat;
  background-position: center;
  background-size: contain;
  z-index: 3;
}

.buv-c-final-verification-step.is-test::after {
  background-image: url('data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHdpZHRoPSIxOCIgaGVpZ2h0PSIxOCIgdmlld0JveD0iMCAwIDE4IDE4IiBmaWxsPSIjRjVBNjIzIj48cGF0aCBkPSJNLjUgMTZoMTdMOSAxIC41IDE2em05LjUtMkg4di0yaDJ2MnptMC0zSDhWN2gydjR6Ii8+PC9zdmc+IA==');
}

.buv-c-final-verification-step.is-failure::after {
  content: '\274C';
  font-size: 17px;
  top: -1px;
  color: variables.$errorColor;
  background: none;
}

.buv-c-final-verification-step--standalone-wrapper {
  padding: 10px;
  box-sizing: border-box;
  border-left: 3px solid;
  text-align: left;
}

.buv-c-final-verification-step--standalone-wrapper.is-success {
  background-color: variables.$successBackgroundColor;
  border-color: variables.$successColor;
}

.buv-c-final-verification-step--standalone-wrapper.is-failure {
  background-color: variables.$errorBackgroundColor;
  border-color: variables.$errorColor;
}

.buv-c-final-verification-step--standalone-wrapper.is-test {
  background-color: variables.$testBackgroundColor;
  border-color: variables.$testColor;
}

.buv-c-final-verification-step--standalone {
  margin: 0 0 5px 30px;
  white-space: unset;
}

.buv-c-final-verification-step--standalone.is-failure {
  margin-bottom: 0;
}

.buv-c-final-verification-step--standalone::after {
  left: -30px;
}

.buv-c-final-verification-step--standalone.is-overlay {
  min-width: 500px;
  width: 100%;
}

.buv-c-verification-substep.is-overlay {
  min-width: 500px;
  width: 500px;
}

.buv-c-verification-substep.is-final {
  display: none;
  line-height: 1.35;
}

.buv-c-verification-substep.is-final.is-visible {
  display: block;
}

.buv-c-verification-substep::after {
  display: none;
}

.buv-c-final-verification-step--overlay {
  position: absolute;
  top: 0;
  left: 0;
  height: 30px;
  width: 35px;
  padding: 4px;
  transition: width .3s ease-in-out, height .3s ease-in-out, padding .3s ease-in-out;
  overflow: hidden;
}

.buv-c-final-verification-step--overlay:hover {
  padding: 10px;
  width: 100%;
  height: auto;
}

@import '../../../shared-styles/utils/flow';
@import '../../../shared-styles/utils/width';
