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

.checkbox-container {
  display         : flex;
  flex-direction  : column;
  background-color: $white;
  padding         : 20px 32px 20px 30px;

  .checkbox-content {
    background    : white;
    display       : flex;
    flex          : 1;
    flex-direction: row;
    flex-wrap     : wrap;
    align-items   : center;
    padding       : 16px 0;

    &--item {
      margin: 15px;
    }
  }

  .checkbox-list-content {
    margin-top: 20px;
  }
}

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

  .list-item {
    display        : flex;
    flex-direction : row;
    justify-content: flex-end;
    align-items    : center;
    padding-bottom : 14px;
    width          : 100%;

    .list-item-text {
      font-size    : $font-size-lg;
      color        : $text-color-lighter;
      opacity      : .9;
      max-width    : 50%;
      white-space  : nowrap;
      text-overflow: ellipsis;
      overflow     : hidden;
    }

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

.drawer-wrap {
  display       : flex;
  flex-direction: column;
  padding       : 20px;

  .header {
    display        : flex;
    flex-direction : row;
    justify-content: space-between;
    align-items    : center;
    font-size      : $font-size-lg;
    font-weight    : bold;
    padding        : 0 10px;
    margin-bottom  : 20px;

    .submit {
      color: $primary-color;
    }
  }

  .content {
    margin-top: 16px;
  }
}

.check-box-extra-wrap {
  margin-top: 14px;
}