// ===================================================
// Cards
// ===================================================
.card {
  backface-visibility: hidden;
  will-change: transform;
  position: relative;
  transition: all 0.3s ease;
  margin: 1rem 1.25rem;
  background: var(--card-back-color);
  color: var(--card-fore-color);
  box-shadow: 0px 0px 1px var(--card-shadow-color-a), 0px 6px 12px var(--card-shadow-color-b);
  border-radius: 0.125rem;
  padding: 1rem 1rem 3.25rem;
  .card-title {
    font-size: 1.5rem;
    line-height: 1.375;
    font-weight: 700;
    margin: 0px 0px 1.25rem;
    color: var(--card-fore-color-light);
    a, a:link, a:visited {
      font-weight: 700;
      transition: 0.3s ease all;
      color: var(--card-fore-color-light);
    }
    padding-bottom: 0.5rem;
    border-bottom: 1px solid var(--card-border-color);
  }
  .card-description {
    margin: 0.125rem -0.5rem 0.125rem;
    font-size: 0.875rem;
    color: var(--card-fore-color-light);
    line-height: 1.35;
    font-weight: 500;
  }
  .card-bottom {
    position: relative;
    margin-left: -1rem;
    margin-right: -1rem;
    border-radius: 0.125rem;
    border-top-left-radius: 22px;
    width: calc(100% - 2rem);
  }
  .card-code {
    position: relative;
    margin: 0.25rem 0px 0rem 1rem;
    background: var(--pre-back-color);
    width: 100%;
    border-radius: 0.25rem;
    line-height: 1.15;
    padding: 1rem;
  }
  .card-examples {
    transition: all 0.3s ease;
    position: relative;
    margin: 0.5rem 0px -1rem 0px;
    background: var(--pre-back-color);
    width: calc(100% - 52px);
    border-radius: 0px 0px 0.125rem 0.125rem;
    line-height: 1.15;
    padding: 0.5rem 1.125rem 2.25rem 2.125rem;
    &::before {
      display: block;
      content: '';
      position: absolute;
      left: 21px;
      top: 0;
      width: 1px;
      opacity: 0.75;
      height: calc(100% - 24px);
      background: var(--button-example-toggler-fore-color);
    }
  }
  &.short {
    margin-bottom: 2rem;
  }
}

// Card sections
.card-section-title {
  font-size: 0.875rem;
  color: var(--card-back-color);
  display: inline-block;
  padding: 0 0.5rem;
  line-height: 2;
  border-radius: 0.125rem;
  margin: 1.25rem 1rem 0.125rem 1rem;
  font-weight: 700;
  &.card-section-html {
    color: white;
    background-image: linear-gradient(135deg,#ff4c9f,#ff7b74);
  }
  &.card-section-css {
    color: white;
    background-image: linear-gradient(135deg,#7983ff,#5f9de9);
  }
  &.card-section-js {
    color: white;
    background-image: linear-gradient(135deg,#ffb000,#f58818);
  }
}

.card-section-demo-title, .card-section-explanation-title,.card-section-browser-support-title {
  transition: 0.3s ease all;
  margin: 0.5rem 1rem .5rem;
  color: var(--card-fore-color-light);
  font-size: 1rem;
  font-weight: 700;
  line-height: 2.25;
}

.card-explanation, .card-browser-support {
  transition: 0.3s ease all;
  margin: 0.5rem;
  p, li {
    line-height: 1.75;
    margin-bottom: 0.5rem;
  }
  position: relative;
  width: calc( 100% + 3rem);
  display: block;
}

.card-browser-support {
  transition: 0.3s ease all;
  margin: 1rem;
}

.browser-support-data {
  transition: 0.3s ease all;
  font-size: 1.75rem;
  font-weight: 300;
  color: var(--card-fore-color-light);
  line-height: 1;
  margin: 0.5rem 1rem .5rem;
}

.card-snippet-demo {
  transition: 0.3s ease all;
  width: calc(100% - 0.25rem);
  margin: 0.5rem 1rem .5rem;
  background:var(--back-color);
  border-radius: .25rem;
  padding: .75rem 1.25rem;
}

// Tags
:not(.token).tag {
  transition: 0.3s ease all;
  border: 1px solid var(--tag-border-color);
  border-radius: 0.125rem;
  color: var(--tag-fore-color);
  text-transform: uppercase; 
  margin: 0px 0.375rem 0.25rem 0px;
  display: inline-block;
  padding: 0.125rem 0.5rem;
  letter-spacing: 0.25px;
  font-size: 0.75rem;
  vertical-align: 0.125rem;
  line-height: 2;
  font-weight: 600;
  &:first-of-type {
    margin-top: 0.375rem;
  }
  background-repeat: no-repeat;
  padding-left: 1.5rem;
  background-position-x: 0.375rem;
  background-position-y: center;
  background-size: 14px;
}

.tag-animation {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none' stroke='%23616B8F' stroke-width='2' stroke-linecap='round' stroke-linejoin='round' class='feather feather-loader'%3E%3Cline x1='12' y1='2' x2='12' y2='6'%3E%3C/line%3E%3Cline x1='12' y1='18' x2='12' y2='22'%3E%3C/line%3E%3Cline x1='4.93' y1='4.93' x2='7.76' y2='7.76'%3E%3C/line%3E%3Cline x1='16.24' y1='16.24' x2='19.07' y2='19.07'%3E%3C/line%3E%3Cline x1='2' y1='12' x2='6' y2='12'%3E%3C/line%3E%3Cline x1='18' y1='12' x2='22' y2='12'%3E%3C/line%3E%3Cline x1='4.93' y1='19.07' x2='7.76' y2='16.24'%3E%3C/line%3E%3Cline x1='16.24' y1='7.76' x2='19.07' y2='4.93'%3E%3C/line%3E%3C/svg%3E");
}
.tag-visual {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none' stroke='%23616B8F' stroke-width='2' stroke-linecap='round' stroke-linejoin='round' class='feather feather-eye'%3E%3Cpath d='M1 12s4-8 11-8 11 8 11 8-4 8-11 8-11-8-11-8z'%3E%3C/path%3E%3Ccircle cx='12' cy='12' r='3'%3E%3C/circle%3E%3C/svg%3E");
}
.tag-other {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none' stroke='%23616B8F' stroke-width='2' stroke-linecap='round' stroke-linejoin='round' class='feather feather-tag'%3E%3Cpath d='M20.59 13.41l-7.17 7.17a2 2 0 0 1-2.83 0L2 12V2h10l8.59 8.59a2 2 0 0 1 0 2.82z'%3E%3C/path%3E%3Cline x1='7' y1='7' x2='7' y2='7'%3E%3C/line%3E%3C/svg%3E");
}
.tag-interactivity {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none' stroke='%23616B8F' stroke-width='2' stroke-linecap='round' stroke-linejoin='round' class='feather feather-edit-2'%3E%3Cpath d='M17 3a2.828 2.828 0 1 1 4 4L7.5 20.5 2 22l1.5-5.5L17 3z'%3E%3C/path%3E%3C/svg%3E");
}
.tag-layout {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none' stroke='%23616B8F' stroke-width='2' stroke-linecap='round' stroke-linejoin='round' class='feather feather-layout'%3E%3Crect x='3' y='3' width='18' height='18' rx='2' ry='2'%3E%3C/rect%3E%3Cline x1='3' y1='9' x2='21' y2='9'%3E%3C/line%3E%3Cline x1='9' y1='21' x2='9' y2='9'%3E%3C/line%3E%3C/svg%3E");
}

.page-container.dark {
  .tag-animation {
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none' stroke='%23BEC1CB' stroke-width='2' stroke-linecap='round' stroke-linejoin='round' class='feather feather-loader'%3E%3Cline x1='12' y1='2' x2='12' y2='6'%3E%3C/line%3E%3Cline x1='12' y1='18' x2='12' y2='22'%3E%3C/line%3E%3Cline x1='4.93' y1='4.93' x2='7.76' y2='7.76'%3E%3C/line%3E%3Cline x1='16.24' y1='16.24' x2='19.07' y2='19.07'%3E%3C/line%3E%3Cline x1='2' y1='12' x2='6' y2='12'%3E%3C/line%3E%3Cline x1='18' y1='12' x2='22' y2='12'%3E%3C/line%3E%3Cline x1='4.93' y1='19.07' x2='7.76' y2='16.24'%3E%3C/line%3E%3Cline x1='16.24' y1='7.76' x2='19.07' y2='4.93'%3E%3C/line%3E%3C/svg%3E");
  }
  .tag-visual {
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none' stroke='%23BEC1CB' stroke-width='2' stroke-linecap='round' stroke-linejoin='round' class='feather feather-eye'%3E%3Cpath d='M1 12s4-8 11-8 11 8 11 8-4 8-11 8-11-8-11-8z'%3E%3C/path%3E%3Ccircle cx='12' cy='12' r='3'%3E%3C/circle%3E%3C/svg%3E");
  }
  .tag-other {
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none' stroke='%23BEC1CB' stroke-width='2' stroke-linecap='round' stroke-linejoin='round' class='feather feather-tag'%3E%3Cpath d='M20.59 13.41l-7.17 7.17a2 2 0 0 1-2.83 0L2 12V2h10l8.59 8.59a2 2 0 0 1 0 2.82z'%3E%3C/path%3E%3Cline x1='7' y1='7' x2='7' y2='7'%3E%3C/line%3E%3C/svg%3E");
  }
  .tag-interactivity {
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none' stroke='%23BEC1CB' stroke-width='2' stroke-linecap='round' stroke-linejoin='round' class='feather feather-edit-2'%3E%3Cpath d='M17 3a2.828 2.828 0 1 1 4 4L7.5 20.5 2 22l1.5-5.5L17 3z'%3E%3C/path%3E%3C/svg%3E");
  }
  .tag-layout {
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none' stroke='%23BEC1CB' stroke-width='2' stroke-linecap='round' stroke-linejoin='round' class='feather feather-layout'%3E%3Crect x='3' y='3' width='18' height='18' rx='2' ry='2'%3E%3C/rect%3E%3Cline x1='3' y1='9' x2='21' y2='9'%3E%3C/line%3E%3Cline x1='9' y1='21' x2='9' y2='9'%3E%3C/line%3E%3C/svg%3E");
  }
}

.clickable-card-wrapper {
  &:link, &:visited {
    &:hover, &:focus {
      text-decoration: none;
      .card {
        transform: scale(1.025);
      }
    }
  }
}

.snippet-view {
  text-align: center;
  width: calc(100% + 2.75rem);
  position: absolute;
  margin-left: 0.75rem;
  bottom: -3.375rem;
}