
.dashboard {
	--column-count: 2;

	display: grid;
	grid-template-columns: repeat(var(--column-count), 1fr);
	// grid-auto-columns: 1fr;
	// grid-template-columns: repeat(auto-fit, 1fr);
	grid-gap: 30px;

	// align-items: start;

	@media screen and (min-width: 48rem) {
		--column-count: 4;
	}
}

.dashboard__item {
	// 1/4
	&.dashboard__item--quarter {
		grid-column-end: span 1;
		// grid-column: 1 /3;
	}

	// 2/4
	&.dashboard__item--half, & {
		grid-column-end: span 2;
		// grid-column: 1;
	}

	// 3/4
	&.dashboard__item--third {
		grid-column-end: span 3;
	}

	// 4/4
	&.dashboard__item--full {
		grid-column: 1 / -1;
		// grid-column: 1;
		// grid-column: 1/3;
	}

  .flex-grow .meta-info {
    padding-top: 4px;
  }
}

// Beta welcome banner
.beta-welcome-banner {
  background-color: color(brand-primary);
  color: #fff;
  text-align: center;
  padding: 20px 30px;
  position: relative;
  overflow: hidden;
  height: 230px;
  border-radius: $border-radius-large;

  &:hover {
    color: #fff;
  }
  .beta-starburst {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 100%;
    object-fit: cover;
    min-height: 100%;
  }

  .v6-wrapper {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);

    &::before {
      content: "";
      width: 160px;
      height: 160px;
      position: absolute;
      top: 50%;
      left: 50%;
      transform: translate(-50%, -50%);
      background: rgb(93,99,241);
      background: radial-gradient(circle, rgba(93,99,241,1) 0%, rgba(93,99,241,0) 100%);
      border-radius: $border-radius-full;
    }
  }

  .v6 {
    opacity: 0.15;
  }

  .beta-copy {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    margin-top: 5px;
    padding: 0px 20px;
    width: 100%;
  }

  .beta-intro {
    font-size: 1.5em;
    opacity: 0.6;
    display: block;
    text-transform: uppercase;
    letter-spacing: 4px;
  }

  .beta-banner-close {
    position: absolute;
    top: 15px;
    right: 15px;
    cursor: pointer;
    font-size: 1.2em;
  }
}

// Animations for beta welcome banner
.beta-fade-in {
	-webkit-animation: fade-in 2s cubic-bezier(0.390, 0.575, 0.565, 1.000) both;
  animation: fade-in 2s cubic-bezier(0.390, 0.575, 0.565, 1.000) both;
}

@-webkit-keyframes fade-in {
  0% {
    opacity: 0;
  }
  100% {
    opacity: 1;
  }
}
@keyframes fade-in {
  0% {
    opacity: 0;
  }
  100% {
    opacity: 1;
  }
}

.beta-slide-in-top {
	-webkit-animation: slide-in-top 0.75s cubic-bezier(0.250, 0.460, 0.450, 0.940) 0.25s both;
  animation: slide-in-top 0.75s cubic-bezier(0.250, 0.460, 0.450, 0.940) 0.25s both;
}

@-webkit-keyframes slide-in-top {
  0% {
    -webkit-transform: translateY(-1000px);
            transform: translateY(-1000px);
    opacity: 0;
  }
  100% {
    -webkit-transform: translateY(0);
            transform: translateY(0);
    opacity: 1;
  }
}
@keyframes slide-in-top {
  0% {
    -webkit-transform: translateY(-1000px);
            transform: translateY(-1000px);
    opacity: 0;
  }
  100% {
    -webkit-transform: translateY(0);
            transform: translateY(0);
    opacity: 1;
  }
}

.beta-slide-in-bottom {
	-webkit-animation: slide-in-bottom 0.75s cubic-bezier(0.250, 0.460, 0.450, 0.940) 1s both;
  animation: slide-in-bottom 0.75s cubic-bezier(0.250, 0.460, 0.450, 0.940) 1s both;
}

@-webkit-keyframes slide-in-bottom {
  0% {
    -webkit-transform: translateY(1000px);
            transform: translateY(1000px);
    opacity: 0;
  }
  100% {
    -webkit-transform: translateY(0);
            transform: translateY(0);
    opacity: 0.6;
  }
}
@keyframes slide-in-bottom {
  0% {
    -webkit-transform: translateY(1000px);
            transform: translateY(1000px);
    opacity: 0;
  }
  100% {
    -webkit-transform: translateY(0);
            transform: translateY(0);
    opacity: 0.6;
  }
}

.beta-puff-in-center {
	-webkit-animation: puff-in-center 0.7s cubic-bezier(0.470, 0.000, 0.745, 0.715) 0.65s both;
  animation: puff-in-center 0.7s cubic-bezier(0.470, 0.000, 0.745, 0.715) 0.65s both;
}

@-webkit-keyframes puff-in-center {
  0% {
    -webkit-transform: scale(3);
            transform: scale(3);
    -webkit-filter: blur(4px);
            filter: blur(4px);
    opacity: 0;
  }
  100% {
    -webkit-transform: scale(1);
            transform: scale(1);
    -webkit-filter: blur(0px);
            filter: blur(0px);
    opacity: 0.15;
  }
}
@keyframes puff-in-center {
  0% {
    -webkit-transform: scale(3);
            transform: scale(3);
    -webkit-filter: blur(4px);
            filter: blur(4px);
    opacity: 0;
  }
  100% {
    -webkit-transform: scale(1);
            transform: scale(1);
    -webkit-filter: blur(0px);
            filter: blur(0px);
    opacity: 0.15;
  }
}

.beta-tracking-in-contract {
	-webkit-animation: tracking-in-contract 0.8s cubic-bezier(0.215, 0.610, 0.355, 1.000) 1.25s both;
  animation: tracking-in-contract 0.8s cubic-bezier(0.215, 0.610, 0.355, 1.000) 1.25s both;
}

@-webkit-keyframes tracking-in-contract {
  0% {
    letter-spacing: 1em;
    opacity: 0;
  }
  40% {
    opacity: 0.2;
  }
  100% {
    letter-spacing: 4px;
    opacity: 0.6;
  }
}
@keyframes tracking-in-contract {
  0% {
    letter-spacing: 1em;
    opacity: 0;
  }
  40% {
    opacity: 0.2;
  }
  100% {
    letter-spacing: 4px;
    opacity: 0.6;
  }
}

// Upgrade Success banner
.upgrade-success-banner__wrapper {
  // Set background-image URL inline
  background-color: color(panel-bg);
  background-position: center;
  background-repeat: no-repeat;
  background-size: cover;
  margin: 0 40px 30px;
  padding: 30px;
  position: relative;
  display: block;
  border-radius: 6px;
  border: 1px solid color(panel-border);
  overflow: hidden;

  img {
    // Set max-height inline to natural height of image
    max-width: 100%;
    display: block;
    margin: auto;
  }

  .upgrade-success-banner__title {
    font-size: 17px;
    font-weight: 500;
    background-color: color(accent-light);
    padding: 6px 25px 7px;
    margin-right: 15px;
    display: inline-block;
    border-radius: $border-radius-full;

    strong {
      color: color(text-normal);
      font-weight: 500;
    }
  }

  .upgrade-success-banner__title-link {
    display: inline-block;

    i {
      opacity: 0.4;
      margin-right: 3px;
    }
  }

  .banner-dismiss {
    color: var(--ee-text-secondary);
    position: absolute;
    right: 30px;
    text-decoration: none;
    top: 20px;

    &:hover {
      color: var(--ee-text-tertiary);
    }

    &::before {
      font-family: 'Font Awesome 6 Pro';
      font-weight: 900;
      content: "\f00d";
      font-size: 24px;
      line-height: 1;
    }
  }


  .upgrade-success-banner__blurb-wrapper {
    margin-top: 25px;
    display: grid;
    // Set grid-template-columns inline
    grid-column-gap: 15px;
    grid-row-gap: 15px;

    @media screen and (max-width: 1200px) {
      grid-template-columns: repeat(2, 1fr) !important;
    }

    @media screen and (max-width: 700px) {
      grid-template-columns: repeat(1, 1fr) !important;
    }

    .upgrade-success-banner__blurb {
      background-color: color(bg-blank);
      padding: 15px 20px 20px 42px;
      position: relative;
      border: 1px solid color(panel-border);
      border-radius: $border-radius-base;
      -webkit-transition: border-color .15s ease-in-out;
      -moz-transition: border-color .15s ease-in-out;
      -o-transition: border-color .15s ease-in-out;

      &:hover {
        border-color: color(brand-primary);

        h6,
        .upgrade-success-banner__blurb-learn {
          color: color(link-hover);
        }
      }

      i {
        position: absolute;
        top: 19px;
        left: 15px;
        opacity: 0.5;
      }

      h6 {
        font-size: 15px;
        color: color(text-normal);
        margin-bottom: 5px;
      }

      p {
        font-size: 13px;
        color: color(text-secondary);
      }

      .upgrade-success-banner__blurb-learn {
        color: color(link);
      }
    }
  }
}

// Turn off banner background image in Dark and Pink themes:
[data-theme="dark"] .upgrade-success-banner__wrapper,
[data-theme="pink"] .upgrade-success-banner__wrapper {
  background-image: none !important;
}
