/* example of use

  // position of each element is defined relative to parent container (from 0 0 to 100% 100%)
  $someElements: (
    (width: 50%, height: 3rem, position: 0 0),
    (width: 4rem, height: 4rem, position: 0 12rem),
    (width: calc(100% - 6rem), height: 4rem, position: 100% 12rem)
  );

  .container {
    @include skeletonPlaceholder.placeholder($someElements);
  }
*/
@keyframes skeleton-opacity {
  to {
    opacity: 0.5;
  }
}
.c-linecard-hub__container {
  display: flex;
  flex-direction: column;
}

[dir] .c-linecard-hub__filter-wrapper {
  background-color: #F5F5F5;
}

.c-linecard-hub__filter-options {
  display: grid;
  grid-template-columns: 1fr;
  /* autoprefixer: ignore next */
  align-items: center;
  min-height: 15rem;
  max-width: 128rem;
}

[dir] .c-linecard-hub__filter-options {
  margin: 0 auto;
}
@media (min-width: 1280px) {
  .c-linecard-hub__filter-options {
    grid-template-columns: 1fr 5fr;
  }
}

.c-linecard-hub__inputs {
  display: flex;
  flex-direction: column;
  /* autoprefixer: ignore next */
  align-items: center;
  /* autoprefixer: ignore next */
  justify-content: center;
}

[dir] .c-linecard-hub__inputs {
  margin: 0 1rem;
}
@media (min-width: 768px) {
  .c-linecard-hub__inputs {
    flex-direction: row;
    justify-content: space-between;
  }
  @supports not (-ms-ime-align: auto) {
    .c-linecard-hub__inputs {
      justify-content: space-evenly;
    }
  }
}
@media (min-width: 1280px) {
  .c-linecard-hub__inputs {
    flex-direction: column;
  }
  [dir=ltr] .c-linecard-hub__inputs {
    padding-right: 1rem;
  }
  [dir=rtl] .c-linecard-hub__inputs {
    padding-left: 1rem;
  }
}

.c-linecard-hub__buttons {
  display: grid;
  grid-template-columns: repeat(7, 1fr);
  grid-column-gap: 1rem;
  column-gap: 1rem;
}

[dir] .c-linecard-hub__buttons {
  padding: 0 1rem;
}
@media (min-width: 768px) {
  .c-linecard-hub__buttons {
    grid-template-columns: repeat(14, 1fr);
    column-gap: 1.5rem;
  }
}

.c-linecard-hub__producers {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  grid-column-gap: 1rem;
  column-gap: 1rem;
}

[dir] .c-linecard-hub__producers {
  margin-bottom: 4rem;
}
@media (min-width: 768px) {
  .c-linecard-hub__producers {
    grid-template-columns: repeat(4, 1fr);
    column-gap: 3rem;
  }
  [dir] .c-linecard-hub__producers {
    margin-bottom: 6.5rem;
  }
}

.c-linecard-hub__manufacturer {
  display: flex;
  /* autoprefixer: ignore next */
  align-items: center;
  /* autoprefixer: ignore next */
  justify-content: center;
  word-break: break-word;
}

[dir] .c-linecard-hub__manufacturer {
  border-color: #B5B5B5;
}

[dir] .c-linecard-hub__select-wrapper.c-linecard-hub__select-wrapper {
  margin-top: 1rem;
}
@media (min-width: 768px) {
  .c-linecard-hub__select-wrapper.c-linecard-hub__select-wrapper {
    width: 40%;
  }
}
@media (min-width: 1280px) {
  .c-linecard-hub__select-wrapper.c-linecard-hub__select-wrapper {
    width: 30rem;
  }
  [dir] .c-linecard-hub__select-wrapper.c-linecard-hub__select-wrapper {
    margin: 1rem;
  }
}
.c-linecard-hub__select-wrapper.c-linecard-hub__select-wrapper .c-linecard-hub__select.c-linecard-hub__select {
  padding-top: 0.8rem;
  padding-bottom: 0.8rem;
}
@media (min-width: 1280px) {
  [dir] .c-linecard-hub__select-wrapper.c-linecard-hub__select-wrapper .c-linecard-hub__select.c-linecard-hub__select {
    padding: 1rem;
  }
}
.c-linecard-hub__select-wrapper.c-linecard-hub__select-wrapper .c-linecard-hub__select-dropdown-list {
  max-height: 40rem;
}

.c-linecard-hub__input {
  color: #2E353B;
}

[dir] .c-linecard-hub__input {
  background-color: #FFF;
  border-radius: 0.5rem;
}
.c-linecard-hub__input:read-only, .c-linecard-hub__input:disabled {
  color: #5A5A5A;
}
[dir] .c-linecard-hub__input:read-only, [dir] .c-linecard-hub__input:disabled {
  background-color: #F5F5F5;
}
.c-linecard-hub__input {
  box-sizing: border-box;
  width: 100%;
  height: 4rem;
}
[dir] .c-linecard-hub__input {
  margin-top: 1rem;
  background-image: url("data:image/svg+xml,%3c?xml%20version='1.0'%20encoding='UTF-8'%20standalone='no'?%3e%3csvg%20id='filtry-svg'%20viewBox='0%200%2050%2050'%20xmlns='http://www.w3.org/2000/svg'%3e%3cpath%20fill='%234b5b69'%20d='M24.965%203.929h22.7c.5%200%201%20.1%201.5.4.8.6%201.1%201.7.5%202.6-.1.2-.3.4-.4.5l-16.2%2017.4c-.2.2-.4.6-.4.9-.1%206-.3%2012-.4%2018%200%20.5-.1%201-.4%201.4-.4.7-1.4%201-2.2.7-3.6-1.4-7.3-2.8-10.9-4.3-.7-.2-1.1-.9-1.1-1.6-.1-1.4-.1-2.7-.2-4.1l-.3-10.3c0-.4-.2-.7-.4-.9l-16.2-17.4c-.4-.4-.6-.9-.7-1.4-.1-1%20.7-2%201.7-2.1h.7l22.7.2zm-21%202.9c.2.3.4.4.6.6l14.8%2016c.4.5.7%201.1.7%201.7.1%204.6.3%209.2.4%2013.8%200%20.2.1.4.4.5%202.7%201.1%205.4%202.1%208.2%203.2.1.1.3.1.4.1v-.4c.1-5.6.3-11.2.4-16.8%200-1%20.4-1.9%201.1-2.6%204.9-5.3%209.9-10.6%2014.8-15.9.1-.1.2-.2.3-.4l-42.1.2z'/%3e%3c/svg%3e");
  background-repeat: no-repeat;
  background-size: 2rem 2rem;
}
[dir=ltr] .c-linecard-hub__input {
  padding: 0 5rem 0 1rem;
  background-position: 96% 50%;
}
[dir=rtl] .c-linecard-hub__input {
  padding: 0 1rem 0 5rem;
  background-position: 4% 50%;
}
@media (min-width: 768px) {
  .c-linecard-hub__input {
    width: 43%;
  }
  [dir=ltr] .c-linecard-hub__input {
    padding-right: 4rem;
  }
  [dir=rtl] .c-linecard-hub__input {
    padding-left: 4rem;
  }
}
@media (min-width: 1280px) {
  .c-linecard-hub__input {
    width: 30rem;
  }
  [dir] .c-linecard-hub__input {
    margin: 1rem;
  }
}

.c-linecard-hub__filter-button {
  text-transform: uppercase;
  min-height: 3.5rem;
  min-width: 3.5rem;
  font-size: 1.3rem;
  font-weight: 900;
}

[dir] .c-linecard-hub__clear-button {
  border: none;
  background-color: transparent;
  cursor: pointer;
  padding: 0;
}
.c-linecard-hub__clear-button:focus {
  outline: none;
}
[dir] .c-linecard-hub__clear-button:focus {
  box-shadow: 0 0 0 0.2rem rgba(46, 53, 59, 0.6);
}
.c-linecard-hub__clear-button {
  align-self: center;
  display: flex;
  align-items: center;
  justify-content: center;
}
[dir] .c-linecard-hub__clear-button {
  padding: 0.2rem;
}

.c-linecard-hub__clear-icon {
  height: 3rem;
  width: 100%;
  fill: #183884;
}

.c-linecard-hub__loader {
  width: -webkit-max-content;
  width: max-content;
}

[dir] .c-linecard-hub__loader {
  margin: 2rem auto;
}.c-no-producer-modal-container {
  display: grid;
  grid-template-rows: 3rem 1fr;
  min-width: 30%;
}[dir] .c-no-producer-modal-container {
  padding: 2rem;
}