@use "sass:map";
@use "@/styles/cunningham-tokens-sass" as *;

$tablet: map.get($themes, "default", "globals", "breakpoints", "tablet");

.c__feedback {
  &__footer {
    position: fixed;
    bottom: 0;
    left: 0;
    right: 0;

    justify-content: center;
    align-items: center;
    padding: 8px;
    background-color: var(--c--contextuals--background--surface--tertiary);
    border-top: 1px solid
      var(--c--contextuals--border--semantic--neutral--tertiary);
    display: none;

    @media (max-width: $tablet) {
      display: flex;
    }
  }

  &__modal {
    &__buttons {
      display: flex;
      flex-direction: column;
      gap: 1rem;
    }

    &__button {
      display: flex;
      padding: 20px;
      border-radius: 4px;
      border: 1px solid
        var(--c--contextuals--border--semantic--neutral--tertiary);
      color: var(--c--contextuals--content--semantic--neutral--secondary);
      gap: 20px;
      text-decoration: none;
      align-items: center;

      &__title {
        font-weight: 700;
        font-size: 14px;
      }

      &__description {
        font-size: 14px;
        font-weight: 400;
      }

      &:hover {
        border-color: var(--c--contextuals--border--semantic--info--tertiary);
        background-color: var(
          --c--contextuals--background--semantic--info--tertiary
        );
        color: var(--c--contextuals--content--semantic--info--secondary);
      }
    }
  }
}

/**
 * This is made to avoid having the feedback footer to hide the content.
 * To remove when the feedback footer is removed.
 */

@media (max-width: $tablet) {
  .calendars__home--feedback,
  .c__main-layout__content__center__children {
    padding-bottom: 57px;
  }
}
