:root {
  --color--3: #cef79e;
  --color--7: #222f30;
  --family--2: "Roboto Mono", Menlo, Consolas, Monaco, Liberation Mono,
    Lucida Console, monospace;
}

.u-btn--1 {
  -webkit-appearance: none;
  -moz-appearance: none;
  appearance: none;
  box-shadow: none;
  outline: none;
  -webkit-user-select: none;
  -moz-user-select: none;
  user-select: none;
}
.u-btn--1 {
  cursor: pointer;
  display: inline-flex;
  font-weight: 400;
  justify-content: flex-start;
  margin: 0;
  padding: 0;
  position: relative;
  text-align: left;
  -webkit-text-decoration: none;
  text-decoration: none;
  -webkit-user-select: none;
  -moz-user-select: none;
  user-select: none;
  width: auto;
}
.u-btn--1:not(:disabled) {
  pointer-events: auto;
}
.u-btn--1 {
  --button-text-background: var(--color--7);
  --button-text-background-hover: var(--color--3);
  --button-text-color: #fff;
  --button-text-color-hover: var(--color--7);
  --button-blob-background: var(--color--3);
  --button-blob-background-hover: var(--color--7);
  --button-blob-icon-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='10' height='10' fill='none' viewBox='0 0 10 10'%3E%3Cpath fill='%23222F30' d='M7.703 5.8H.398V4.6h7.305l-3.36-3.36.855-.84 4.8 4.8-4.8 4.8-.855-.84 3.36-3.36Z'/%3E%3C/svg%3E");
  --button-blob-icon-image-hover: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='10' height='10' fill='none' viewBox='0 0 10 10'%3E%3Cpath fill='%23fff' d='M7.703 5.8H.398V4.6h7.305l-3.36-3.36.855-.84 4.8 4.8-4.8 4.8-.855-.84 3.36-3.36Z'/%3E%3C/svg%3E");
  --button-blob-icon-position: center left -150%, center left 50%;
  --button-blob-icon-position-hover: center left 50%, center left 150%;
  --button-blob-scale: 0.875;
  --button-transition-duration: 0.6s;
  --button-transition-timing-function: cubic-bezier(0.25, 1, 0.5, 1);
  align-items: stretch;
  background: transparent;
  border-radius: 0;
  height: 48px;
  width: -moz-fit-content;
  width: fit-content;
}
.u-btn--1 svg {
  top: 0;
  left: 0;
  position: absolute;
  width: 100%;
  height: 100%;
  z-index: 1;
}
.u-btn--1 svg path {
  transition-duration: var(--button-transition-duration);
  transition-property: fill;
  transition-timing-function: var(--button-transition-timing-function);
}
.u-btn--1 .btn_label {
  align-items: center;
  background: var(--button-text-background);
  border-radius: 12px 0 0 12px;
  color: var(--button-text-color);
  display: inline-flex;
  font-family: Roboto Mono, Menlo, Consolas, Monaco, Liberation Mono,
    Lucida Console, monospace;
  font-family: var(--family--2);
  font-size: max(
    0.75rem,
    min(calc(0.75rem + 0.002 * (100vw - 27.5rem)), 0.875rem)
  );
  justify-content: flex-start;
  letter-spacing: 0;
  line-height: 1;
  margin-right: 16px;
  overflow: visible;
  padding: 8px 12px 8px 26px;
  position: relative;
  text-transform: uppercase;
  transition-duration: var(--button-transition-duration);
  transition-property: background-color, color, margin-inline-end, padding-right;
  transition-timing-function: var(--button-transition-timing-function);
}
.u-btn--1 .label_corner {
  background: transparent;
  display: block;
  top: 0;
  right: -16px;
  bottom: 0;
  position: absolute;
  width: 18px;
  height: 100%;
}
.u-btn--1 .label_corner svg path {
  fill: var(--button-text-background);
}
.u-btn--1 .btn_icon {
  background-color: transparent;
  display: inline-flex;
  overflow: hidden;
  padding: 10px;
  position: relative;
  width: 51px;
  height: 100%;
  transform: scale(1);
  transform-origin: center right;
  transition-duration: var(--button-transition-duration);
  transition-property: transform;
  transition-timing-function: var(--button-transition-timing-function);
}
.u-btn--1 .btn_icon:before {
  background-color: transparent;
  background-image: var(--button-blob-icon-image-hover),
    var(--button-blob-icon-image);
  background-repeat: no-repeat;
  background-position: var(--button-blob-icon-position);
  background-size: 10px 10px;
  content: "";
  top: 0;
  left: 4px;
  position: absolute;
  width: calc(100% - 4px);
  height: 100%;
  transition-duration: var(--button-transition-duration);
  transition-property: background-position;
  transition-timing-function: var(--button-transition-timing-function);
  z-index: 2;
}
.u-btn--1 .btn_icon svg path {
  fill: var(--button-blob-background);
}
@media (hover: hover) and (pointer: fine) {
  .u-btn--1:hover .btn_label {
    background-color: var(--button-text-background-hover);
    color: var(--button-text-color-hover);
    margin-right: 12px;
    padding-right: 14px;
  }
  .u-btn--1:hover .label_corner svg path {
    fill: var(--button-text-background-hover);
  }
  .u-btn--1:hover .btn_icon {
    transform: scale(var(--button-blob-scale));
  }
  .u-btn--1:hover .btn_icon:before {
    background-position: var(--button-blob-icon-position-hover);
  }
  .u-btn--1:hover .btn_icon svg path {
    fill: var(--button-blob-background-hover);
  }
}