.mainContainer {
  padding: 0 1.6rem;
  @include min(tablet) {
    padding: 0 2.4rem;
  }
}

.dottedBorder {
  border: var(--feedbackModule-main-border);
  border-radius: var(--feedbackModule-main-border-radius);
  width: auto !important;
  max-width: var(--main-container-max) !important;
  margin-bottom: 1rem !important;
  margin: 0 auto;
  padding: 1.6rem 0;
}
.container {
  @include flex-align(center, space-between);
  border: var(--feedbackModule-container-border);
  background: var(--feedbackModule-background-color);
  border-radius: var(--feedbackModule-container-radius);
  flex-direction: column;
  padding: 24px 16px;
  gap: var(--feedbackModule-container-gap-mobile);
}
.textContainer {
  @include flex-direction(column);
  gap: 8px;
}

.firstText {
  font-weight: 700;
  font-size: var(--feedbackModule-firstText-font-size-mobile);
  line-height: var(--feedbackModule-firstText-line-height-mobile);
  color: var(--color-71);
}

.secondText {
  font-weight: 500;
  font-size: 16px;
  line-height: var(--feedbackModule-secondText-line-height);
  color: var(--color-72);
  > a {
    font-weight: 600;
    font-size: 16px;
    line-height: var(--feedbackModule-secondText-anchor-line-height);
    color: var(--color-73);
    padding: 0;
  }
}
.buttonContainer {
  @include flex-direction(row);
  width: 100%;
  justify-content: center;
  gap: 8px;

  > :first-child,
  > :last-child {
    padding: 16px 24px;
    border: var(--feedbackModule-buttons-border-style);
    border-radius: var(--feedbackModule-buttons-border-radius);
    font-weight: 700;
    width: var(--feedbackModule-buttons-width-mobile);
    font-size: var(--feedbackModule-buttons-font-size);
    line-height: var(--feedbackModule-buttons-line-height);
    color: var(--color-74);
    height: var(--feedbackModule-buttons-height-mobile);
    @include flex-align(center, center);
    background: var(--feedbackModule-buttons-background);
    letter-spacing: var(--feedbackModule-buttons-letter-spacing);
    > svg {
      display: none;
    }
  }

  > :first-child:disabled,
  > :last-child:disabled {
    cursor: not-allowed;
  }

  .yesButton {
    color: var(--color-4);
    background: var(--color-75) !important;
    border: var(--feedbackModule-first-button-border);
    box-shadow: var(--feedback-first-button-box-shadow-hover) !important;
  }

  .noButton {
    color: var(--color-4);
    background-color: var(--color-76) !important;
    border: var(--feedbackModule-second-button-border);
    box-shadow: var(--feedback-second-button-box-shadow-hover) !important;
  }

  > :first-child {
    box-shadow: var(--feedbackModule-first-button-box-shadow);
    background: var(--feedback-first-button-background);
  }
  > :last-child {
    box-shadow: var(--feedbackModule-second-button-box-shadow);
    background: var(--feedback-second-button-background);
  }

  .onlyDesktop {
    display: none;
  }
}

@include min(tablet) {
  .dottedBorder {
    max-width: calc(var(--main-container-max) - 48px) !important;
  }

  .container {
    flex-direction: row;
    padding: 24px;
    gap: var(--feedbackModule-container-gap);
  }

  .firstText {
    font-size: var(--feedbackModule-firstText-font-size);
    line-height: var(--feedbackModule-firstText-line-height);
  }
  .onlyDesktop {
    display: block;
  }
  .textContainer {
    gap: 4px;
  }
  .buttonContainer {
    width: auto;
    > :first-child,
    > :last-child {
      width: var(--feedbackModule-buttons-width);
      height: var(--feedbackModule-buttons-height);
    }
  }
}
