@use 'mixins/mixins' as *;
@use 'common/var' as *;

@include b(page) {
  @include set-component-css-var('page', $page);
}

@keyframes blink {
  from {
  }
  to {
    color: var(--el-color-primary);
  }
}

@include b(page) {
  height: 100%;
  background-color: getCssVar('page', 'bg-color');

  @include e(card-item) {
    transition: all 0.9s cubic-bezier(0.17, 0.55, 0.55, 1) 0.2;

    @include m(blink) {
      animation: blink 0.75s infinite alternate;
    }
  }

  @include e(aside) {
    height: 100%;

    border-left: 1px solid var(--el-border-color-light);
    padding: 0 4px;
  }

  @include e(nav) {
    padding: 0;
    margin: 0;

    & > li {
      list-style: none;
      padding: 4px 8px;
      font-size: 12px;
      cursor: pointer;
      color: getCssVar('text-color-regular');

      @include when(active) {
        color: getCssVar('color-primary');
      }
    }
  }

  @include e(main) {
    height: 100%;
  }

  @include e(footer) {
    height: 40px;
    display: flex;
    padding: 0 8px;
    justify-content: space-between;
    align-items: center;
    align-content: center;
    border-top: 1px solid var(--el-border-color-light);
  }
}