@import '../../common/modern-reset.css';
@import '../../common/a11y.css';

/* 아바타 컴포넌트 */
/* 인터랙션이 없는 이미지 컴포넌트 */
.img-avatar {
  --size: 4rem;
  --radius: 50%;
  --state: #dbdbdb;
  --state-active: #4cfe88;
  --state-border: #fff;

  width: var(--size);
  position: relative;

  img {
    width: 100%;
    aspect-ratio: 1/1; /* 가로/세로 비율 */
    border-radius: var(--radius);
  }

  .state {
    width: 25%;
    aspect-ratio: 1/1;
    border-radius: var(--radius);
    position: absolute;
    bottom: 0;
    right: 0;
    border: 2px solid var(--state-border);
    /* default */
    background: var(--state);

    &.is-active {
      background: var(--state-active);
    }
  }
}

/* 아바타 컴포넌트 */
/* 인터랙션이 있는 버튼 컴포넌트 */
.button-avatar {
  --size: 4rem;
  --radius: 50%;
  --state: #dbdbdb;
  --state-active: #4cfe88;
  --state-border: #fff;

  position: relative;

  border: 0;
  /* margin: 0; */
  padding: 0;
  background: transparent;
  width: var(--size);

  img {
    width: 100%;
    aspect-ratio: 1/1; /* 가로/세로 비율 */
    border-radius: var(--radius);
  }

  &::after {
    content: '';
    position: absolute; /* BFC */

    width: 25%;
    aspect-ratio: 1/1;
    border-radius: var(--radius);
    position: absolute;
    bottom: 0;
    right: 0;
    border: 2px solid var(--state-border);
    /* default */
    background: var(--state);
  }

  &.is-active::after {
    background: var(--state-active);
  }
}