@import '../../constants/styles';
@import '../../constants/modal';

.PasswordModal {
  @extend %modal;

  .container {
    @extend %modal-shared-container-style;
    display: flex;
    justify-content: center;
    align-items: center;
    height: 155px;
    width: 500px;
    padding: 10px;

    .wrapper {
      align-self: stretch;
      flex-grow: 1;
      display: flex;
      flex-direction: column;
      position: relative;

      .header {
        font-size: 16px;
        font-weight: 700;
      }

      .enter {
        margin-top: 22px;
        font-size: 14px;

        input {
          margin-top: 8px;
          width: 100%;
          border: none;
          outline: none;
          
          &.correct {
            border-bottom: 2px solid #00a5e4;
          }
          
          &.wrong {
            border-bottom: 2px solid red;
          }
        }
      }

      .incorrect-password {
        margin-top: 2px;
        font-size: 14px;
        color: red;
      }

      .buttons {
        position: absolute;
        bottom: 0;
        right: 0;
        display: flex;

        .Button {
          font-size: 14px;
        }

        .Button:hover{
          background: none;
        }
      }
    }
  }
}