$o-hero-bp1: mainnav;
$o-hero-ratio: 51.388888889;
$o-hero-slide-speed: 600ms;

.o-hero {
  width: 100%;
  height: $o-hero-ratio * 1%;
  position: relative;
}


.o-hero__frame {
  position: relative;
  display: grid;
  grid-template-columns: 1fr;
  grid-template-rows: 1fr;
  grid-gap: space(2);
  width: 100%;
  background: palette(neutral, 400);

  &::before {
    grid-row: 1;
    grid-column: 1;
    content: "";
    width: 1px;
    margin-left: -1px;
    float: left;
    height: 0;
    padding-top: 44%; // magic value???
  }
}


.o-hero__picture {
  grid-row: 1;
  grid-column: 1;
  opacity: 0;
  transition: opacity $o-hero-slide-speed linear;

  &.is-active {
    opacity: 1;
  }
}


.o-hero__panel {
  display: flex;
  justify-content: space-between;
  padding: space(2);
  background-color: palette(neutral, 0);
  user-select: text;

  @include mq($o-hero-bp1) {
    flex-direction: column;
    position: absolute;
    right: 0;
    bottom: 0;
    padding: space(3);
    min-width: column(5.5, 12);
    max-width: calc(#{$site-column-size} * 5.5px);
  }
}


.o-hero__info {
  @include mq($o-hero-bp1) {
    margin-bottom: space(3);
  }
}


.o-hero__label {
  @include font-size(m);
  @include font-weight(medium);
  color: palette(neutral, 800);

  @include mq($o-hero-bp1) {
    @include ellipsis;
  }
}


.o-hero__nav {
  display: flex;
  flex-direction: column-reverse;
  justify-content: space-between;

  @include mq($o-hero-bp1) {
    flex-direction: row;
  }
}


.o-hero__indicator {
  display: flex;
  align-items: center;
}


.o-hero__count {
  @include font-size(m);
  color: palette(neutral, 500);
}


.o-hero__count--current {
  @include font-weight(medium);
  color: palette(neutral, 800);
}


.o-hero__meter {
  width: space(6);
  margin: 0 space(2);
  height: 2px;
  background-color: palette(neutral, 800);
}


.o-hero__value {
  background-color: palette(primary, 500);
  height: 100%;
  transform-origin: left;
  transition: transform $o-hero-slide-speed ease-in-out;
}


.o-hero__buttons {
  display: none;

  @include mq($o-hero-bp1) {
    display: flex;
    user-select: none;
  }
}


.o-hero__button {
	& + & {
		margin-left: space(3);
	}
    display: inline-flex;
    justify-content: center;
    width: space(4);
    height: space(4);
    padding: 0;
    border: none;
    transition: transform 150ms ease-out;

	&:focus {
		outline: none;
		color: palette(neutral, 800);
	}

	&:hover {
		color: palette(primary, 800);
		cursor: pointer;
	}

    &:active {
      transform: translateX(-2px) scale(0.9);
    }

	&.next {
      &:active {
        transform: translateX(2px) scale(0.9);
      }
	}
}


// Modifier for when hero has extra info in its panel
.o-hero--has-info {
  & .o-hero__panel {
    @include mq($o-hero-bp1) {
      transform: translateY(50%);
    }
  }
}