@import "@styles/theme.scss";
@import "@styles/custom.scss";

.radio-group-container {
  display         : flex;
  flex-direction  : column;
  padding         : 20px 32px 20px 30px;
  margin-bottom   : 20px;
  background-color: $white;

  .radio-group-content {
    display       : flex;
    align-items   : center;
    flex-wrap     : wrap;
    flex-direction: row;
    margin-top    : 14px;
  }
}

.tag {
  color          : #888888;
  height         : 64px;
  min-width      : 100px;
  display        : flex;
  padding        : 8px;
  background     : #fff;
  border         : #E5E5E5 2px solid;
  justify-content: center;
  align-items    : center;
  font-size      : 28px;
  margin         : 6px 10px 6px 0;

  &--checked {
    background: $primary-color;
    color     : #fff;
    border    : $primary-color 2px solid;
  }
}

.radio-picker-container {
  display        : flex;
  flex-direction : column;
  justify-content: space-between;
  position       : relative;

  .radio-picker-wrap {

    .radio-picker-content {
      display        : flex;
      flex-direction : row;
      padding-bottom : 14px;
      align-items    : center;
      justify-content: flex-end;

      .radio-picker-text {
        font-size: $font-size-lg;
        color    : $text-color-lighter;
        opacity  : .9;
      }

      .picker-arrow {
        margin-left: 24px;
        width      : 32px;
        height     : 32px;
      }
    }
  }

}

.radio-content {
  display       : flex;
  flex-direction: column;

  .radio-wrap {
    margin-top: 20px;
  }
}

.radio-item {
  display       : flex;
  flex-direction: row;
  padding-bottom: 28px;

  .check-img {
    width       : 46px;
    height      : 46px;
    margin-right: 24px;
  }

  .item-text {
    font-size: $font-size-lg;
    opacity  : .9;
  }
}

.last-child {
  padding-bottom: 0;
}

.radio-item-extra-wrap {
  margin-top: 14px;
}