department-of-veterans-affairs/vets-website

@import "~@department-of-veterans-affairs/formation/sass/shared-variables";
@import "~@department-of-veterans-affairs/css-library/dist/stylesheets/modules/m-process-list";
@import "~@department-of-veterans-affairs/css-library/dist/stylesheets/modules/m-form-process";
@import "../../../platform/forms/sass/m-schemaform";
@import "~@department-of-veterans-affairs/css-library/dist/stylesheets/modules/m-modal";
@import "~@department-of-veterans-affairs/css-library/dist/stylesheets/modules/m-omb-info";
@import "../../../platform/forms/sass/m-form-confirmation";

.find-a-representative {
  .clearfix {
    content: "";
    display: block;
    clear: both;
  }

  .va-accordion__button {
    visibility: hidden !important;
  }

  @media (min-width: $small-screen) and (max-width: $medium-screen) {
    .usa-content,
    .va-nav-breadcrumbs {
      padding-left: 0.9375rem;
      padding-right: 0.9375rem;
    }
  }

  .search-section {
    .search-controls-container {
      #representative-search-controls {
        display: flex;
        flex-direction: column;
        position: relative;

        .search-controls-text-inputs {
          @media (min-width: $medium-screen) {
            .geolocation-container {
              display: flex;
              min-width: 6.25rem;


              .location-input {
                min-width: 30rem;
              }

              .use-my-location-button-container {
                align-self: flex-end;
                min-width: 16rem;
                margin-left: 4.8rem;
                margin-bottom: 1.3rem;
              }
            }
            .search-area-dropdown {
              width: 30rem;
            }

            .representative-name-input {
              width: 30rem;
            }
          }
          @media (max-width: $medium-screen) {
            .location-input {
              max-width: 28.75rem;
            }

            .search-area-dropdown {
              max-width: 28.75rem;
            }

            .representative-name-input {
              max-width: 28.75rem;
            }

            .use-my-location-button-container {
              margin-top: 1rem;
              margin-left: -1rem;
            }
          }
        }

        .usa-input-error {
          margin-top: 0rem;
        }

        .use-my-location-button-container-error {
          @media (min-width: $large-screen) {
            top: 6.4rem;
          }
        }

        .use-my-location-link {
          text-decoration: none;
          background-color: transparent;
          color: var(--vads-color-link);
          font-weight: normal;
          padding: 0;
          margin: 0 0 0 1rem;

          @media (max-width: $small-desktop-screen) {
            text-align: left;
          }
        }

        .finding-your-location-loading {
          min-width: 22.4rem;
          text-decoration: none;
          background-color: transparent;
          margin-top: 0.5rem;
          color: var(--vads-color-link);
          font-weight: normal;
          background-repeat: no-repeat;
          background-color: transparent;
        }

        #representative-search {
          max-width: 12.8rem;
          margin: 3.2rem 0 3.2rem 0 !important;
        }

        .rep-type-selector {
          p:last-child {
            margin-bottom: -1.6rem !important;
          }
        }
      }
    }
  }

  .results-section {
    @media (min-width: $medium-screen) {
      min-width: 37.5rem;
    }

    .loading-indicator-container {
      margin-bottom: 37.5rem !important;
    }

    hr {
      @media (min-width: $medium-screen) {
        min-width: 37.5rem;
      }
      @media (max-width: $medium-screen) {
        max-width: 35.625rem;
      }
    }
    .pagination-container .hydrated {
      border-top: none !important;
    }

    #search-results-title {
      margin-bottom: 3.2rem;
    }

    h3 {
      margin: 0.8rem 0 0.8rem 0;
    }

    .sort-dropdown {
      .sort-select-and-apply {
        display: flex;
        align-items: flex-end;

        .sort-select {
          min-width: 15.625rem;
          margin-left: 0;
        }

        .sort-apply-button {
          margin-left: 1.25rem;
        }
      }


      @media (max-width: 16.25rem) {
        .sort-select-and-apply {
          flex-direction: column;
          align-items: flex-start;

          .sort-apply-button {
            margin: 1.5rem 0 0 0;
          }
        }
      }
    }

    .representative-results-list {
      width: 100%;

      .representative-result-card {
        .representative-result-card-content {
          @media (min-width: 18.125rem) {
            .report-outdated-information-button {
              min-width: 16.875rem;
            }
          }
        }

        @media (min-width: $medium-screen) {
          min-width: 37.5rem;


          .representative-result-card-content {
            display: grid;
            grid-template-rows: auto auto;
            grid-template-columns: 1fr 1fr;

            .experimental-parent {
              display: contents;
            }

            .report-thank-you-alert {
              grid-column: 1 / -1;
              grid-row: 1;
            }

            .representative-info-heading {
              grid-column: 1 / 2;
              grid-row: 2;
            }

            .report-outdated-information-button {
              grid-column: 2 / 3;
              grid-row: 2;
              text-align: right;
              margin-right: -8px;
            }

            .associated-organizations-info {
              grid-column: 1 / 5;
              grid-row: 3;
            }

            .representative-contact-section {
              grid-column: 1 / 3;
              grid-row: 4;
            }
          }
        }

        @media (max-width: $medium-screen) {
          display: flex;
          align-items: center;
          max-width: 35.625rem;


          .report-thank-you-alert {
            margin-top: 1.875rem;
            margin-bottom: 0;
          }

          .report-outdated-information-button {
            margin-top: 1.875rem;
          }
        }
        @media (min-width: 565px) and (max-width: $medium-screen) {
          .representative-result-card-content {
            min-width: 21.875rem;
          }
        }
      }
    }

    .report-other-text-input {
      @media (min-width: $small-screen) {
        padding-left: 2.5rem;
      }
    }
  }

  .help-section {
    @media (max-width: $medium-screen) {
      padding-right: 1.5625rem;
    }
  }
}