<template>
  <div>
    <div class="aside">
      <div class="aside-header aside-ref">
        <div class="aside-title"></div>
      </div>
      <div class="aside-content aside-ref">
        <div v-for="item in [1, 2, 3, 4]" :key="item" class="aside-item aside-ref">
          <div class="aside-text"></div>
        </div>
      </div>
    </div>

    <div class="aside">
      <div class="aside-header aside-ref">
        <div class="aside-title"></div>
      </div>
      <div class="aside-content aside-ref">
        <div v-for="item in [1, 2, 3, 4]" :key="item" class="aside-item aside-ref">
          <div class="aside-check"></div>
          <div class="aside-text"></div>
        </div>
      </div>
      <div class="aside-footer aside-ref">
        <div class="aside-button">
          <div class="aside-button-text"></div>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
export default {
  name: 'Aside',
};
</script>

<style scoped>
.aside {
  width: 100%;
  margin-bottom: 16px;
  border: 2px solid var(--aside-border-color);
  background-color: var(--aside-background-color);
}
.aside-header {
  width: 100%;
  padding: 8px;
  border-bottom: 2px solid var(--aside-border-color);
}
.aside-title {
  width: 80%;
  height: 8px;
  background-color: var(--aside-title-color);
}
.aside-content {
  padding: 8px 0;
}
.aside-item {
  width: 100%;
  display: flex;
  flex-flow: row nowrap;
  align-items: center;
  justify-content: flex-start;
  padding: 8px;
}
.aside-check {
  width: 12px;
  height: 12px;
  margin-right: 8px;
  background-color: var(--aside-checked-color);
  border: 2px solid var(--aside-border-color);
}
.aside-text {
  width: 70%;
  height: 8px;
  background-color: var(--aside-text-color);
}
.aside-footer {
  width: 100%;
  padding: 8px;
  border-top: 2px solid var(--aside-border-color);
}
.aside-button {
  width: 100%;
  padding: 8px 32px;
  background-color: var(--aside-button-color);
}
.aside-button-text {
  width: 100%;
  height: 8px;
  background-color: var(--aside-button-text-color);
}
</style>
