@use "colors";
@use "typography";
@use "variables";

@use "sass:math";

.accounts-ui {
  .fields {
    .field {
      margin-bottom: variables.$spacing;
    }
  }
  .buttons {
    @include variables.flex-center;
    flex-direction: column;
    .btn-primary {
      margin: variables.$spacing auto variables.$spacing auto !important;
      min-width: 200px;
    }
    a {
      display: block;
      text-align: center;
      margin-bottom: math.div(variables.$spacing, 2);
      font-size: typography.$smallish-font;
    }
  }
  .warning {
    display: block;
  }
  .error,
  .warning {
    background: colors.$redTransparent;
  }
}

.user-responses-list {
  padding: 0;
  margin: 0;
  list-style-type: none;
}
.user-response-item {
  margin-bottom: variables.$spacing-half;
  border: 1px solid var(--border-color);
  padding: variables.$spacing;
  border-radius: 3px;
  & .response-details {
    display: flex;
    gap: variables.$spacing;
    flex-wrap: wrap;
  }
}
.user-response-item-survey {
  display: flex;
  align-items: center;
  font-size: typography.$large-font;
  margin-bottom: variables.$spacing-quarter;
  .survey-status {
    margin-left: 10px;
  }
}
.survey-status {
  text-transform: uppercase;
  background: var(--bg-color-light);
  padding: 4px 8px;
  border-radius: 3px;
  font-size: typography.$small-font;

  &-preview {
  }
  &-open {
  }
  &-closed {
  }
}

.account-userId {
  font-size: typography.$smallish-font;
}
