/*!*************************************************************************************************************************************************************************************************************************************************************************************!*\
  !*** css ./node_modules/css-loader/dist/cjs.js!./node_modules/postcss-loader/dist/cjs.js??ruleSet[1].rules[0].use[2]!./node_modules/sass-loader/dist/cjs.js??ruleSet[1].rules[0].use[3]!./web/app/themes/Gambleonlineaustralia/Components/AllSlotsInterlink/AllSlotsInterlink.scss ***!
  \*************************************************************************************************************************************************************************************************************************************************************************************/
/* stylelint-disable max-nesting-depth */
.all-slots-interlink {
  --heading-color: #0b4e1a;
  --action-outline: #0b4e1a;
  --action-color: #0b4e1a;
  --action-color-hover: #fff;
}
.all-slots-interlink.bg-color--primary {
  --heading-color: #fff;
}
.all-slots-interlink.bg-color--tertiary {
  --heading-color: #fff;
}
.all-slots-interlink.bg-color--colored-grey {
  --heading-color: #0e1b11;
}
.all-slots-interlink.bg-color--grey {
  --heading-color: #0e1b11;
}
.all-slots-interlink__title {
  color: var(--heading-color);
  text-align: center;
}
.all-slots-interlink-intro-text {
  margin: 0 0 1rem;
}
@media (min-width: 1024px) {
  .all-slots-interlink-intro-text {
    margin: 0 0 2rem;
  }
}
.all-slots-interlink-cards {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  justify-content: center;
  margin: 0 -1rem;
}
@media (min-width: 768px) {
  .all-slots-interlink-cards {
    gap: 25px;
    margin: 0;
    margin: initial;
  }
}
.all-slots-interlink-more-cards {
  display: grid;
  grid-template-rows: 1fr;
  transition: grid-template-rows 0.3s ease;
}
.all-slots-interlink-more-cards:empty {
  grid-template-rows: 0fr;
}
.all-slots-interlink-card {
  position: relative;
  display: flex;
  flex: 0 1 170px;
  flex-direction: column;
  height: 0;
  overflow: hidden;
  font-size: 14px;
  border-radius: 12px;
  box-shadow: 0 3px 6px rgba(0, 0, 0, 0.1607843137);
  transition: height 0.3s ease-in-out;
  will-change: height;
}
.all-slots-interlink-card.show {
  height: 180px;
}
.all-slots-interlink-card--rating {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 50px;
  padding: 0 7px;
  color: #fff;
  background: linear-gradient(180deg, #000, 60%, transparent);
  pointer-events: none;
}
.all-slots-interlink-card--rating img {
  position: relative;
  top: -1px;
  display: inline-block;
}
.all-slots-interlink-card--image {
  height: 130px;
}
.all-slots-interlink-card--image img {
  width: 100%;
  height: 100%;
  -o-object-fit: cover;
     object-fit: cover;
}
.all-slots-interlink-card--footer {
  display: flex;
  gap: 10px;
  align-items: center;
  height: 100%;
  padding: 0 10px;
  color: #0e1b11;
  background-color: #fff;
  border-radius: 0 0 14px 14px;
}
.all-slots-interlink-card--title {
  flex: 1 1 auto;
  font-weight: 700;
  line-height: 1;
}
.all-slots-interlink-card--cta {
  flex: 0 0 30px;
  height: 30px;
  background-color: #278034;
  border-radius: 50%;
}
.all-slots-interlink-card--cta::after {
  position: relative;
  top: 50%;
  left: 50%;
  display: block;
  width: 9px;
  height: 9px;
  margin: -6px 0 0 -8px;
  border: solid 3px #fff;
  border-bottom: none;
  border-left: none;
  border-radius: 2px;
  transform: rotate(45deg);
  content: "";
}
.all-slots-interlink-card--overlay {
  position: absolute;
  top: 20px;
  left: 0;
  display: inline-flex;
  flex-direction: column;
  justify-content: center;
  width: 100%;
  height: 100%;
  background: linear-gradient(0deg, #0e1b11 26%, rgba(14, 27, 17, 0.67));
  visibility: hidden;
  opacity: 0;
  transition: top 0.3s ease-in-out, opacity 0.3s ease-in-out;
  pointer-events: none;
  will-change: top, opacity;
}
.all-slots-interlink-card--overlay .btnnew {
  min-height: 42px;
  margin: 5px 10px;
  padding: 7px;
  font-size: 14px;
  line-height: 1;
}
.all-slots-interlink-card--overlay .btnnew::after {
  all: unset;
}
.all-slots-interlink-card:hover .all-slots-interlink-card--overlay, .all-slots-interlink-card:active .all-slots-interlink-card--overlay, .all-slots-interlink-card:focus .all-slots-interlink-card--overlay {
  animation: fade 0.3s ease-in-out forwards;
}
@keyframes fade {
  from {
    visibility: hidden;
    opacity: 0;
  }
  to {
    top: 0;
    visibility: visible;
    opacity: 1;
    pointer-events: all;
  }
}
.all-slots-interlink-load-more {
  text-align: center;
  transition: transform 0.3s ease-in-out, height 0.3s ease-in-out;
  will-change: transform, height;
}
.all-slots-interlink-load-more .btnnew {
  margin: 8px 0 0 0;
}
@media (min-width: 768px) {
  .all-slots-interlink-load-more .btnnew {
    margin: 25px 0 0 0;
  }
}
.all-slots-interlink-load-more .btnnew::before {
  position: absolute;
  top: 50%;
  right: 25px;
  width: 11px;
  height: 11px;
  margin-top: -10px;
  border: solid 3px var(--button-accent-color);
  border-top: none;
  border-left: none;
  border-radius: 2px;
  transform: rotate(45deg);
  opacity: 1;
  transition: border-color 0.3s ease-in-out, opacity 0.3s ease-in-out;
  content: "";
  will-change: border-color, opacity;
}
.all-slots-interlink-load-more .btnnew:hover::before {
  border-color: var(--button-accent-color-hover);
}
.all-slots-interlink-load-more .btnnew::after {
  all: unset;
}
.all-slots-interlink-load-more--spinner {
  position: absolute;
  top: 50%;
  left: 50%;
  width: 2em;
  height: 2em;
  margin: -1em 0 0 -1em;
  border: 3px solid rgba(207, 232, 212, 0.2);
  border-top-color: #ecf5ef;
  border-radius: 50%;
  opacity: 0;
  transition: opacity 0.3s ease-in-out;
  animation: spin 1s linear infinite;
  will-change: opacity;
}
.all-slots-interlink-load-more--text {
  opacity: 1;
  transition: opacity 0.3s ease-in-out;
  will-change: opacity;
}
.all-slots-interlink-load-more.loading .all-slots-interlink-load-more--spinner {
  opacity: 1;
}
.all-slots-interlink-load-more.loading .all-slots-interlink-load-more--text {
  opacity: 0;
}
.all-slots-interlink-load-more.loading .btnnew::before {
  opacity: 0;
}

@keyframes spin {
  to {
    transform: rotate(360deg);
  }
}