.btn {
    width: fit-content;
    min-width: 64px;
    border-radius: 100px;
    color: var(--link-color);
    display: block;
    cursor: pointer;
    transition: 0.2s;
  }
  .btn.min {padding: 4px 12px; font-size: 0.8rem;}
  .btn.xs {padding: 8px 16px; font-size: 0.9rem;}
  .btn.xm {padding: 10px 24px;}
  .btn.xl {padding: 12px 32px; font-size: 1.1rem;}
  .btn.full {width: 100%; display: block;}
  .btn.box {border-radius: 4px;}
  .btn.ico-mui {
    min-width: 0;
    padding: 8px;
    font-size: 1rem;
  }
  .btn.ico-mui.xs {
    width: 32px;
    height: 32px;
  }
  .btn.ico-mui.xm {
    width: 40px;
    height: 40px;
  }
  .btn.ico-mui.xl {
    width: 48px;
    height: 48px;
  }
  .btn.ico-mui.xs {font-size: var(--typo-bd);}
  .btn.ico-mui.xm {font-size: var(--typo-h4);}
  .btn.ico-mui.xl {font-size: var(--typo-h1);}
    
  .btn.ico-mui,
  .btn.ico-bef,
  .btn.ico-aft {
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 2px;
  }
  .btn.ico-mui::before ,
  .btn.ico-bef::before ,
  .btn.ico-aft::after {
    width: 24px;
    height: 24px;
    line-height: 24px;
  }
  .btn.ico-bef::before {margin-left: -4px;}
  .btn.ico-aft::after {margin-right: -4px;}
  
  .btn.outline {border: 1px solid var(--link-color);}
  .btn.fill {
    background: var(--link-color);
    color: #fff;
  }
  .btn:hover {background: #E3F2FD;}
  .btn.outline:hover {
    background: var(--link-color);
    color: #fff;
  }
  .btn.fill:hover {
    background: var(--link-color);
    filter: grayscale(30%);
  }
  .btn.dsbl {
    color: var(--txt-disabled);
    pointer-events: none;
  }
  .btn.dsbl.outline {border-color: var(--txt-disabled);}
  .btn.dsbl.fill {background-color: var(--bg-disabled);}