@import '~scss/variables';

.banner {
  position: relative;
  display: flex;
  padding: 24px 20px;
  margin-bottom: 12px;
  line-height: 20px;
  border-radius: $border-radius;
  box-shadow: 0 2px 4px 0 rgba(36, 46, 66, 0.12),
    0 4px 8px 0 rgba(125, 158, 224, 0.06);
  color: $white;

  &.light {
    background-color: $blue;
  }

  &.dark {
    background-color: #2e4658;
  }

  &.purple {
    background-image: linear-gradient(108deg, #3023ae, #c86dd7);
  }

  &.white {
    background-color: $white;
    .icon {
      background-color: $bg-color;
    }
    .title {
      color: $second-text-color;
      :global {
        .h3 {
          color: $head-color;
          margin-bottom: 0;
        }
      }
    }
  }

  & > div {
    & + div {
      margin-left: 20px;
    }
  }

  strong {
    color: $white;
    font-weight: $font-bold;
    font-family: $font-family-id;
  }
}

.icon {
  display: flex;
  justify-content: center;
  align-items: center;
  width: 52px;
  height: 52px;
  border-radius: 100px 0 100px 100px;
  background-color: rgba(239, 244, 249, 0.08);
}

.rightIcon {
  position: absolute;
  top: 0;
  right: 0;
  width: 150px;
}

.title {
  :global {
    .h3 {
      color: $white;
      margin-bottom: 2px;
      text-shadow: 0 2px 4px rgba(36, 46, 66, 0.1);
    }
  }
}
