.text-button {
  display: inline-block;
  font-size: 1px;
  position: relative;
  line-height: 1px;
}
.text-button .buttonFrame {
  font-size: 1px;
  margin-right: 0px;
  line-height: 1.1;
  border-radius: 4px;
  cursor: pointer;
  -webkit-tap-highlight-color: rgba(0, 0, 0, 0);
  display: inline-block;
  position: relative;
}
.text-button button {
  appearance: none;
  position: relative;
  display: inline-block;
  background-color: rgb(81, 81, 81);
  border: 2px solid rgb(81, 81, 81);
  color: white;
  cursor: pointer;
  -webkit-tap-highlight-color: rgba(0, 0, 0, 0);
  font-family: alegreya, sans-serif;
  font-size: 17px;
  height: 32px;
  margin: 0px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  text-align: left;
  user-select: none;
  transition: background-color 500ms, color 200ms ease-out;
}
.text-button button.isMarked {
  background-color: hsl(25, 82%, 57%);
}
.text-button button:focus {
  outline: 0;
}
.text-button button::-moz-focus-inner {
  border: 0;
}
.text-button svg {
  width: 14px;
  height: 14px;
  margin-left: 8px;
  margin-bottom: -2px;
  margin-right: -7px;
}

.text-button button {
  padding-left: 15px;
  padding-right: 15px;
  border-radius: 4px;
}
.text-button .buttonFrame::before,
.text-button .buttonFrame::after {
  content: " ";
  position: absolute;
  z-index: 1;
  opacity: 0;
  height: 2px;
  left: 2px;
  right: 2px;
  transition: transform 200ms, opacity 100ms 100ms;
  transform: scaleX(0);
  background-color: hsl(25, 100%, 75%);
}
.text-button .buttonFrame::before {
  top: 0px;
}
.text-button .buttonFrame::after {
  bottom: 0px;
}

body:not(.isTouchOnly) .text-button .buttonFrame:hover button {
  transition: border-color 200ms ease 100ms, background-color 500ms;
  border-color: hsl(25, 100%, 75%);
}
body:not(.isTouchOnly) .text-button .buttonFrame:hover button.isMarked {
  transition: border-color 200ms ease 100ms, background-color 50ms;
}
body:not(.isTouchOnly) .text-button .buttonFrame:hover::after, body:not(.isTouchOnly) .text-button .buttonFrame:hover::before {
  opacity: 1;
  transform: scaleX(1);
  transition: transform 200ms, opacity 20ms;
}

.showBrowserFocus .text-button.hasFocus button {
  transition: border-color 200ms ease 100ms, background-color 500ms;
  border-color: hsl(25, 100%, 75%);
}
.showBrowserFocus .text-button.hasFocus button.isMarked {
  transition: border-color 200ms ease 100ms, background-color 50ms;
}
.showBrowserFocus .text-button.hasFocus .buttonFrame::after, .showBrowserFocus .text-button.hasFocus .buttonFrame::before {
  opacity: 1;
  transform: scaleX(1);
  transition: transform 200ms, opacity 20ms;
}

.text-button.isTouchStart button {
  transition: border-color 200ms ease 100ms, background-color 500ms;
  border-color: hsl(25, 100%, 75%);
}
.text-button.isTouchStart button.isMarked {
  transition: border-color 200ms ease 100ms, background-color 50ms;
}
.text-button.isTouchStart .buttonFrame::after, .text-button.isTouchStart .buttonFrame::before {
  opacity: 1;
  transform: scaleX(1);
  transition: transform 200ms, opacity 20ms;
}

.text-button.isTouchStart button, .text-button.isTouchStart .buttonFrame::before, .text-button.isTouchStart .buttonFrame::after {
  transition: none;
}

.text-button.color-transparent button {
  background-color: rgba(0, 0, 0, 0.412);
  border: 2px solid white;
  color: white;
}
.text-button.color-transparent button.isMarked {
  background-color: rgba(255, 255, 255, 0.47);
}

.text-button.color-purple button {
  background-color: hsl(301, 100%, 37%);
  border-color: hsl(301, 100%, 37%);
}
.text-button.color-purple button.isMarked {
  background-color: hsl(220, 100%, 75%);
}
.text-button.color-purple .buttonFrame::before,
.text-button.color-purple .buttonFrame::after {
  background-color: hsl(220, 100%, 75%);
}

body:not(.isTouchOnly) .text-button.color-purple .buttonFrame:hover button,
.showBrowserFocus .text-button.color-purple.hasFocus button,
.text-button.color-purple.isTouchStart button {
  border-color: hsl(220, 100%, 75%);
}