.btn {
  font-weight: 600;
  font-size: 15px;
  letter-spacing: -0.02em;
  display: flex;
  align-items: center;
  justify-content: center; }
  .btn--blue {
    color: #fff;
    width: fit-content;
    height: 56px;
    border-radius: 119px;
    background: #3171f7;
    transition: background 0.2s; }
    .btn--blue:hover {
      background: #2257c5; }
  .btn--dark {
    background: #0d1723;
    transition: background 0.2s; }
    .btn--dark:hover {
      background: #2d3641; }
  .btn--grey {
    color: #fff;
    width: fit-content;
    height: 56px;
    border-radius: 119px;
    background: rgba(13, 23, 35, .41);
    transition: background 0.2s; }
    .btn--grey:hover {
      background: rgba(13, 23, 35, .59); }
  .btn--white {
    color: #fff;
    width: fit-content;
    height: 56px;
    border-radius: 119px;
    background: #fff;
    transition: background 0.2s; }
  .btn--circle {
    width: 56px;
    height: 56px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    flex: 0 0 56px; }
    .btn--circle:before {
      content: '';
      width: 11px;
      height: 11px;
      background: #fff;
      mask: url(/images/arrow/btn_arrow.svg) no-repeat center/11px; }
  .btn--link {
    width: 100%;
    position: relative;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 8px; }
    .btn--link:after {
      content: '';
      width: 5px;
      height: 9px;
      background: url(/images/arrow/btn_link_arrow.svg) no-repeat center;
      background-size: 5px 9px; }
  .btn--wide {
    width: 100%; }
  .btn:disabled {
    background: rgba(13, 23, 35, .41); }