@import '../../../../scss/mixins';

.wrapper {
  background: #fff;
  border-radius: 4px;
  box-shadow: 0 1px 1px rgb(0 0 0 / 10%);
  display: flex;
  flex-flow: row wrap;
  min-height: 250px;
  margin-bottom: $gridSpacingNormal;
}

.col {
  padding: $gridSpacingNormal;
  display: flex;
  flex: 1 50%;
  flex-direction: column;
  justify-content: center;

  &:nth-of-type(2) {
    background-image: radial-gradient(circle at bottom right, #f8f8ff 0%, #f8f8ff 50%, #f8f8ff 50%, #fff 50.2%, #fff 72%, #fff 100%);
    background-position: right bottom;
    background-repeat: no-repeat;
    background-size: 134%;
    border-bottom-right-radius: 4px;
    border-top-right-radius: 4px;

    [dir='rtl'] & {
      background-image: radial-gradient(circle at bottom left, #f8f8ff 0%, #f8f8ff 50%, #f8f8ff 50%, #fff 50.2%, #fff 72%, #fff 100%);
      background-position: left bottom;
    }
  }
}

.colRight {
  background-image: url('../../../../images/premium-banner.png');
  background-position: bottom;
  background-repeat: no-repeat;
  background-size: contain;
  height: 100%;
}

.text {
  color: $textColorLight;
  font-size: 14px;
  line-height: 20px;
  margin: 0 0 $gridSpacingNormal;
}

.dismiss {
  flex: 2 100%;
  margin-top: 20px;
  position: absolute;
  right: 40px;

  [dir='rtl'] & {
    right: unset;
    left: 40px;
  }

  button {
    background: transparent;
    border: 0;
    cursor: pointer;
  }
}