구현된 화면

코드

CSS

calc(): 계산식을 사용할 수 있다.
--padding: 16px로 지정해주었었다. 이 값의 반을 적용하고 싶다면,
calc(var(--padding) / 2)으로 표현해주면 된다.

/* action */
.actions {
  display: flex;
  justify-content: space-around;
  margin: var(--padding) 0;
}

.actions button {
  display: flex;
  flex-direction: column;
  font-size: var(--font-small);
  color: var(--grey-dark-color);
}

.actions button i {
  margin: auto;
  margin-bottom: calc(var(--padding) / 2);
  font-size: 16px;
}

.actions button i.active {
  color: var(--blue-color);
}