:host {
  display: block;
}

.flip-card {
  position: relative;
  perspective: 100rem;
  height: var(--flip-card-height, 100px);

  &__side {
    height: var(--flip-card-height, 100px);
    transition: all var(--flip-card-transition-duration, 800ms) var(--flip-card-transition-timing-function, ease);
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    backface-visibility: hidden;
    border-radius: var(--flip-card-border-radius, 4px);
    overflow: hidden;
    box-shadow: var(--flip-card-box-shadow, 0 15px 40px rgba(0, 0, 0, 0.15));

    &--front {
      background-color: var(--flip-card-background-color-front, white);
    }

    &--back {
      background-color: var(--flip-card-background-color-back, white);
      transform: rotateY(180deg);
    }
  }

  &:hover &__side--front.hover {
    transform: rotateY(-180deg);
  }

  &:hover &__side--back.hover {
    transform: rotateY(0);
  }
}

.clicked--front {
  transform: rotateY(-180deg);
}

.clicked--back {
  transform: rotateY(0);
}