/* Load bootstrap icons font */
@import '../libraries/bootstrap-icons/font/bootstrap-icons.css';
@import 'components/wishlist.css';
@import 'components/form-elements.css';
@import 'components/search-result.css';

body {
  min-height: 100vh;
  padding: 160px 0 2em 0;
  background-image: linear-gradient(
    43deg,
    #4158d0 0%,
    #c850c0 46%,
    #ffcc70 100%
  );

  > nav.navbar {
    background-image: linear-gradient(
      43deg,
      #4158d0 0%,
      #c850c0 46%,
      #ffcc70 100%
    );
  }
}

.card-img-top {
  aspect-ratio: 16 / 9;
  object-fit: cover;
}

.btn.btn-add {
  background-color: rgba(255, 255, 255, 0.4);
  margin: 1em auto;
  text-indent: -99999px;
  width: 50px;
  height: 50px;
  border-radius: 50%;
  display: block;
  position: relative;

  &::before {
    content: '+';
    color: black;
    position: absolute;
    left: 0;
    top: 0;
    transform: translateY(-6px);
    width: 100%;
    height: 100%;
    /* z-index: 1; */
    /* display: block; */
    text-indent: 0;
    font-size: 60px;
    font-weight: 100;
    /* line-height: 0; */
    /* text-align: center; */
    display: flex;
    justify-content: center;
    align-items: center;
  }

  &:hover {
    background-color: rgba(255, 255, 255, 0.9);
  }
}

.form-control {
  background-color: white !important;
}

img {
  max-width: 100%;
}

img.selectable {
  opacity: 0.9;
  border: 5px solid transparent;
  transition: all 0.2s ease;
  &:hover {
    opacity: 1;
    cursor: pointer;
  }
  &:active {
    opacity: 1;
    cursor: pointer;
  }
}

/* input[type="radio"] {
  display: none;
} */

.imagecheck:checked + label > img.selectable {
  border: 5px solid rgb(228, 207, 94);
  opacity: 1;
}