@import '../../styles/index.scss';

.recovery-popup-content {
  display: flex;
  flex-direction: column;
  align-items: center;

  h1 {
    font-size: 16px;
    margin-top: 25px;
    margin-bottom: 0px;
  }

  p {
    margin: 30px 0px;
    font-size: 13px;
    text-align: center;
    padding: 0px 33px;
  }

  .popup-buttons {
    margin: 0px 0px 25px 0px;

    button {
      text-align: center; 
      height: 28px;
      width: 66px;
      border-radius: 14px;

      &.main-button {
        background-color: #0091ff;
        color: white;
      }

      &.cancel-button {
        background: transparent;
      }
    }
  }
}

@mixin themable($_THEME, $_TEXT_COLOR){
  [data-theme^=#{$_THEME}],
  [data-theme] [data-theme^=#{$_THEME}] {
    .recovery-popup-content {    
      .popup-buttons {
        button {
          &.cancel-button {
            color: $_TEXT_COLOR;
          }
        }
      }
    }
  }
}

@include themable($_THEME_LIGHT, $_TEXT_COLOR_LIGHT);
@include themable($_THEME_DARK, $_TEXT_COLOR_DARK);