// jBox plugin: Confirm

.jBox-Confirm {
  .jBox-content {
    text-align: center;
    padding: 46px 35px;

    @media (max-width: 500px) {
      padding: 32px 20px;
    }
  }
}

.jBox-Confirm-footer {
  height: 46px;
}

.jBox-Confirm-button {
  display: block;
  float: left;
  cursor: pointer;
  text-align: center;
  width: 50%;
  line-height: 46px;
  height: 46px;
  overflow: hidden;
  padding: 0 10px;
  transition: color .2s, background-color .2s;
  box-sizing: border-box;

  &-cancel {
    border-bottom-left-radius: 4px;
    background: #ddd;
    color: #666;

    &:hover,
    &:active {
      background: #ccc;
    }

    &:active {
      box-shadow: inset 0 1px 3px rgba(0, 0, 0, .2);
    }
  }

  &-submit {
    border-bottom-right-radius: 4px;
    background: #7d0;
    color: #fff;

    &:hover,
    &:active {
      background: #6c0;
    }

    &:active {
      box-shadow: inset 0 1px 3px rgba(0, 0, 0, .2);
    }
  }
}
