<template>
  <div class="banner">
    <div class="banner-nav" style="left:8px;">
      <div class="banner-nav-icon"></div>
    </div>
    <div class="banner-nav" style="right:8px;">
      <div class="banner-nav-icon"></div>
    </div>
    <div class="banner-image"></div>
    <div class="banner-content">
      <div class="banner-text banner-text-ref large"></div>
      <div class="banner-text banner-text-ref"></div>
      <div class="banner-price banner-text-ref"></div>
      <div class="banner-button">
        <div class="banner-button-text"></div>
      </div>
    </div>
  </div>
</template>

<script>
export default {
  name: "Banner"
}
</script>

<style scoped>
.banner {
  display: flex;
  flex-flow: row nowrap;
  padding: 0 10%;
  background-color: var(--banner-background-color);
  position: relative;
}
.banner-nav {
  padding: 6px;
  position: absolute;
  top: 50%;
  margin-top: -12px;
  cursor: pointer;
  background-color: var(--banner-nav-color);
}
.banner-nav:hover {
  background-color: var(--banner-nav-hover-color);
}
.banner-nav-icon {
  width: 12px;
  height: 12px;
  border-radius: 12px;
  background-color: var(--banner-nav-icon-color);
}
.banner-image {
  width: 50%;
  background-color: #fff;
}
.banner-content {
  width: 50%;
  padding: 32px;
}
.banner-text {
  width: 50%;
  height: 16px;
  background-color: var(--banner-text-color);
}
.banner-text.large {
  width: 100%;
  margin-bottom: 4px;
}
.banner-price {
  width: 30%;
  height: 24px;
  margin: 24px 0;
  background-color: var(--banner-text-color);
}
.banner-button {
  display: inline-block;
  padding: 12px 24px;
  background-color: var(--banner-button-color);
}
.banner-button-text {
  width: 50px;
  height: 8px;
  background-color: var(--banner-button-text-color);
}
</style>