@use '../../../style/color/index.scss' as *;

.ver-card {
  border-radius: 5px;
  background-color: #fff;
  overflow: hidden;
  transition: 0.3s;

  .dark & {
    color: $ver-zinc-1;
    background-color: $ver-zinc-9;
    border-color: $ver-zinc-6;
  }
}

.ver-card-header {
  height: 42px;
  line-height: 42px;
  padding: 0 15px;
  border-bottom: 1px solid $ver-zinc-3;
  font-size: 14px;

  .dark & {
    border-color: $ver-zinc-7;
  }
}

.ver-card-body {
  padding: 10px 15px;
  line-height: 24px;
}

.ver-card-footer {
  height: 42px;
  line-height: 42px;
  padding: 0 15px;
  border-top: 1px solid $ver-zinc-3;
  font-size: 14px;
  .dark & {
    border-color: $ver-zinc-7;
  }
}

// shadow

.ver-card.is-shadow-always {
  box-shadow: 0px 0px 12px rgba(0, 0, 0, 0.12);
}

.ver-card.is-shadow-never {
  box-shadow: none;
}

.ver-card.is-shadow-hover {
  &:hover {
    box-shadow: 0px 0px 12px rgba(0, 0, 0, 0.12);
  }
}
