:root {
  --button-color: #7E7367;
  --button-color-hover: #464039;
  --button-color-active: #38332E;
  --button-color-disabled: #D8D4CF;
  --button-color-disabled-background: #F8F7F7;
  --button-color-secondary-background: #D8D4CF; }

:root {
  --search-bar-height: 44px; }

.breeds-search__search-form {
  max-width: 342px;
  height: var(--search-bar-height);
  gap: 8px; }

.breeds-search__search-bar {
  background: #F8F7F7;
  padding: 0 0 0 24px;
  border: 0; }
  .breeds-search__search-bar.has-value, .breeds-search__search-bar:focus {
    background: #fff;
    border: 1px solid #D8D4CF; }
    .breeds-search__search-bar.has-value ~ .breeds-search__icons, .breeds-search__search-bar:focus ~ .breeds-search__icons {
      left: unset;
      right: 12px; }
      .breeds-search__search-bar.has-value ~ .breeds-search__icons .breeds-search__dismiss-icon, .breeds-search__search-bar:focus ~ .breeds-search__icons .breeds-search__dismiss-icon {
        display: flex;
        justify-content: center;
        align-items: center; }
      .breeds-search__search-bar.has-value ~ .breeds-search__icons .breeds-search__search-icon:hover, .breeds-search__search-bar:focus ~ .breeds-search__icons .breeds-search__search-icon:hover {
        cursor: pointer; }

.breeds-search__search-icon {
  margin: 12px;
  width: 20px;
  height: 20px; }

.breeds-search__icons {
  top: 0;
  left: 12px;
  gap: 8px; }

.breeds-search__dismiss-icon {
  display: none;
  width: 20px;
  height: 20px; }
  .breeds-search__dismiss-icon:hover {
    cursor: pointer; }

.breeds-search__suggestions {
  max-height: 200px;
  overflow-y: auto; }
  .breeds-search__suggestions-container {
    padding: 8px 4px 8px 0;
    max-width: 342px;
    top: calc(var(--search-bar-height) + 8px);
    left: 0;
    border-radius: 16px;
    box-shadow: 0px 6px 24px 0px rgba(56, 51, 46, 0.08), 0px 2px 2px 0px rgba(56, 51, 46, 0.02); }
  .breeds-search__suggestions::-webkit-scrollbar {
    width: 4px; }
  .breeds-search__suggestions::-webkit-scrollbar-thumb {
    background: #D8D4CF;
    border-radius: 6px;
    padding-right: 4px; }
  .breeds-search__suggestions::-webkit-scrollbar-track-piece {
    margin: 16px 4px 16px 0;
    padding-right: 4px; }

.breeds-search__suggestion {
  color: #464039 !important;
  height: 40px;
  padding: 0 20px;
  color: #464039;
  font-family: "Ubuntu", sans-serif;
  font-size: 14px;
  font-style: normal;
  line-height: 136%; }
  .breeds-search__suggestion:hover {
    color: #464039 !important;
    cursor: pointer;
    text-decoration: none; }
    @media (min-width: 768px) {
      .breeds-search__suggestion:hover {
        background-color: #F8F7F7; } }
  .breeds-search__suggestion:visited {
    color: #464039 !important; }

:root {
  --button-color: #7E7367;
  --button-color-hover: #464039;
  --button-color-active: #38332E;
  --button-color-disabled: #D8D4CF;
  --button-color-disabled-background: #F8F7F7;
  --button-color-secondary-background: #D8D4CF; }

.breeds-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 16px; }
  @media (min-width: 768px) {
    .breeds-grid {
      grid-template-columns: repeat(3, 1fr); } }
  .breeds-grid__container {
    background-color: #fff;
    max-width: 1440px;
    gap: 24px; }
    @media (min-width: 768px) {
      .breeds-grid__container {
        gap: 40px; } }
    .breeds-grid__container:has(> .breeds-grid) {
      padding: 40px 24px; }
      @media (min-width: 768px) {
        .breeds-grid__container:has(> .breeds-grid) {
          padding: 80px 88px; } }
  .breeds-grid__breed-card {
    padding: 24px;
    gap: 24px;
    border-radius: 8px; }
    .breeds-grid__breed-card:hover {
      text-decoration: none; }
    @media (min-width: 768px) {
      .breeds-grid__breed-card {
        padding: 40px; } }
    .breeds-grid__breed-card--dog {
      background-color: #FBF7F4; }
    .breeds-grid__breed-card--cat {
      background-color: #F6FAF5; }
    .breeds-grid__breed-card picture {
      max-width: 342px; }
  .breeds-grid__breed-name {
    color: #464039;
    font-family: "Ubuntu", sans-serif;
    font-size: 18px;
    font-style: normal;
    font-weight: 500;
    line-height: 136%; }

:root {
  --button-color: #7E7367;
  --button-color-hover: #464039;
  --button-color-active: #38332E;
  --button-color-disabled: #D8D4CF;
  --button-color-disabled-background: #F8F7F7;
  --button-color-secondary-background: #D8D4CF; }

.breeds-pagination {
  gap: 16px; }
  .breeds-pagination__left-arrow--dog, .breeds-pagination__left-arrow--cat {
    transform: rotate(180deg); }
  .breeds-pagination__left-arrow--dog, .breeds-pagination__left-arrow--cat, .breeds-pagination__right-arrow--dog, .breeds-pagination__right-arrow--cat {
    width: 16px;
    height: 16px; }
  .breeds-pagination__left-arrow--dog, .breeds-pagination__right-arrow--dog {
    border: 1px solid #936031; }
    .breeds-pagination__left-arrow--dog:hover, .breeds-pagination__right-arrow--dog:hover {
      background-color: #FBF7F4; }
  .breeds-pagination__left-arrow--cat, .breeds-pagination__right-arrow--cat {
    border: 1px solid #4A773C; }
    .breeds-pagination__left-arrow--cat:hover, .breeds-pagination__right-arrow--cat:hover {
      background-color: #F6FAF5; }
  .breeds-pagination__empty-element {
    width: 32px;
    height: 32px; }
  .breeds-pagination__page-number, .breeds-pagination__ellipsis {
    color: #9F9389 !important;
    width: 32px;
    height: 32px;
    font-family: "Ubuntu", sans-serif;
    font-size: 16px;
    font-style: normal;
    font-weight: 500;
    line-height: 136%; }
  .breeds-pagination__page-number:hover {
    color: #464039 !important;
    text-decoration: none; }
  .breeds-pagination__page-number.active {
    color: #464039 !important; }
    .breeds-pagination__page-number.active:hover {
      color: #464039 !important;
      text-decoration: none; }

:root {
  --button-color: #7E7367;
  --button-color-hover: #464039;
  --button-color-active: #38332E;
  --button-color-disabled: #D8D4CF;
  --button-color-disabled-background: #F8F7F7;
  --button-color-secondary-background: #D8D4CF; }

.breeds-no-results {
  padding: 24px 24px 40px 24px;
  max-width: 564px;
  gap: 16px; }
  @media (min-width: 768px) {
    .breeds-no-results {
      padding: 40px 0 80px 0; } }
  .breeds-no-results__title {
    color: #464039;
    font-family: "Ubuntu", sans-serif;
    font-size: 22px;
    font-style: normal;
    line-height: 128%;
    letter-spacing: -0.88px; }
    @media (min-width: 768px) {
      .breeds-no-results__title {
        font-size: 24px;
        letter-spacing: -0.96px; } }
  .breeds-no-results__text {
    color: #7E7367;
    font-family: "Ubuntu", sans-serif;
    font-size: 14px;
    font-style: normal;
    line-height: 136%; }

/*# sourceMappingURL=breedsLibrary.css.map*/