.button-wrapper::after {
  font-family: 'icomoon';
  font-style: normal;
  font-variant: normal;
  font-weight: normal;
  text-transform: none;
  speak: none;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale; }

.button-wrapper::after {
  content: "\e900"; }

.button-wrapper--file label {
  transition: background-color 0.45s cubic-bezier(0.23, 1, 0.32, 1), color 0.45s cubic-bezier(0.23, 1, 0.32, 1);
  font-weight: normal;
  font-family: "Founders-grotesk-Regular", "sans-serif";
  border: 2px solid var(--color-primary);
  padding-top: calc(12px + 4 * ((100vw - 600px) / 800));
  padding-bottom: calc(12px + 4 * ((100vw - 600px) / 800));
  padding-left: calc(22px + 8 * ((100vw - 600px) / 800));
  padding-right: calc(22px + 8 * ((100vw - 600px) / 800));
  box-sizing: border-box;
  background-color: transparent;
  text-align: center;
  font-size: inherit;
  cursor: pointer;
  display: inline-block;
  min-width: 140px;
  -webkit-appearance: none;
  border-radius: 0; }
  @media screen and (max-width: 600px) {
    .button-wrapper--file label {
      padding-top: 12px; } }
  @media screen and (min-width: 1400px) {
    .button-wrapper--file label {
      padding-top: 16px; } }
  @media screen and (max-width: 600px) {
    .button-wrapper--file label {
      padding-bottom: 12px; } }
  @media screen and (min-width: 1400px) {
    .button-wrapper--file label {
      padding-bottom: 16px; } }
  @media screen and (max-width: 600px) {
    .button-wrapper--file label {
      padding-left: 22px; } }
  @media screen and (min-width: 1400px) {
    .button-wrapper--file label {
      padding-left: 30px; } }
  @media screen and (max-width: 600px) {
    .button-wrapper--file label {
      padding-right: 22px; } }
  @media screen and (min-width: 1400px) {
    .button-wrapper--file label {
      padding-right: 30px; } }
  .has-mouse .button-wrapper--file label:hover, .button-wrapper--file .has-mouse label:hover {
    transition: background-color 0.25s cubic-bezier(0.25, 0.46, 0.45, 0.94), color 0.25s cubic-bezier(0.25, 0.46, 0.45, 0.94);
    background-color: var(--color-primary);
    color: #fff; }

.button-wrapper--reset input {
  border-radius: 0;
  resize: none !important;
  -webkit-appearance: none;
  /* clears the 'X' from Internet Explorer */
  /* clears the 'X' from Chrome */ }
  .button-wrapper--reset input:focus, .button-wrapper--reset input:active:not(:disabled) {
    outline: none; }
  .button-wrapper--reset input::-ms-clear {
    display: none;
    width: 0;
    height: 0; }
  .button-wrapper--reset input::-ms-reveal {
    display: none;
    width: 0;
    height: 0; }
  .button-wrapper--reset input::-webkit-search-decoration, .button-wrapper--reset input::-webkit-search-cancel-button, .button-wrapper--reset input::-webkit-search-results-button, .button-wrapper--reset input::-webkit-search-results-decoration {
    display: none; }

.button-wrapper {
  position: relative;
  display: flex;
  align-items: center;
  color: #171716; }
  .button-wrapper::before {
    transition: background-color 0.45s cubic-bezier(0.23, 1, 0.32, 1);
    flex-shrink: 0;
    display: block;
    box-sizing: border-box;
    border: 2px solid var(--color-link);
    border-radius: 50%;
    content: ''; }
  .button-wrapper::after {
    transition: color 0.45s cubic-bezier(0.23, 1, 0.32, 1);
    position: absolute;
    top: 50%;
    color: #171716;
    font-size: calc(16px + 8 * ((100vw - 600px) / 800));
    transform: translateY(-50%); }
    @media screen and (max-width: 600px) {
      .button-wrapper::after {
        font-size: 16px; } }
    @media screen and (min-width: 1400px) {
      .button-wrapper::after {
        font-size: 24px; } }
  .button-wrapper::before {
    width: calc(40px + 16 * ((100vw - 600px) / 800));
    height: calc(40px + 16 * ((100vw - 600px) / 800));
    margin-right: calc(8px + 2 * ((100vw - 600px) / 800)); }
    @media screen and (max-width: 600px) {
      .button-wrapper::before {
        width: 40px; } }
    @media screen and (min-width: 1400px) {
      .button-wrapper::before {
        width: 56px; } }
    @media screen and (max-width: 600px) {
      .button-wrapper::before {
        height: 40px; } }
    @media screen and (min-width: 1400px) {
      .button-wrapper::before {
        height: 56px; } }
    @media screen and (max-width: 600px) {
      .button-wrapper::before {
        margin-right: 8px; } }
    @media screen and (min-width: 1400px) {
      .button-wrapper::before {
        margin-right: 10px; } }
  .button-wrapper::after {
    left: calc(12px + 4 * ((100vw - 600px) / 800)); }
    @media screen and (max-width: 600px) {
      .button-wrapper::after {
        left: 12px; } }
    @media screen and (min-width: 1400px) {
      .button-wrapper::after {
        left: 16px; } }
  .has-mouse .button-wrapper:hover::before {
    transition: background-color 0.25s cubic-bezier(0.25, 0.46, 0.45, 0.94);
    background-color: var(--color-link); }
  .has-mouse .button-wrapper:hover::after {
    transition: color 0.25s cubic-bezier(0.25, 0.46, 0.45, 0.94);
    color: #fff; }
  .button-wrapper::before {
    position: absolute;
    top: 0; }
  .button-wrapper input {
    outline: 1px solid transparent;
    font-weight: normal;
    font-size: calc(18px + 2 * ((100vw - 600px) / 800));
    line-height: calc(22px + 2 * ((100vw - 600px) / 800));
    font-family: "Founders-grotesk-Regular", "sans-serif";
    height: calc(40px + 16 * ((100vw - 600px) / 800));
    padding: 0;
    padding-left: calc(50px + 16 * ((100vw - 600px) / 800));
    position: relative;
    z-index: 1;
    border: none;
    background-color: transparent;
    cursor: pointer; }
    @media screen and (max-width: 600px) {
      .button-wrapper input {
        font-size: 18px; } }
    @media screen and (min-width: 1400px) {
      .button-wrapper input {
        font-size: 20px; } }
    @media screen and (max-width: 600px) {
      .button-wrapper input {
        line-height: 22px; } }
    @media screen and (min-width: 1400px) {
      .button-wrapper input {
        line-height: 24px; } }
    @media screen and (max-width: 600px) {
      .button-wrapper input {
        height: 40px; } }
    @media screen and (min-width: 1400px) {
      .button-wrapper input {
        height: 56px; } }
    @media screen and (max-width: 600px) {
      .button-wrapper input {
        padding-left: 50px; } }
    @media screen and (min-width: 1400px) {
      .button-wrapper input {
        padding-left: 66px; } }
  .button-wrapper--previous::after, .button-wrapper--preview-prev::after {
    content: "\e906"; }
  .button-wrapper--upload-button::after {
    content: "\e908"; }
  .button-wrapper--remove-button::after {
    content: "\e909"; }
  .button-wrapper--hidden {
    display: none; }

.button-wrapper--reset {
  position: relative;
  align-items: center;
  color: #171716; }
  .button-wrapper--reset input {
    height: auto;
    font-weight: normal;
    font-size: calc(18px + 2 * ((100vw - 600px) / 800));
    line-height: calc(22px + 2 * ((100vw - 600px) / 800));
    font-family: "Founders-grotesk-Regular", "sans-serif";
    padding: 0 0 0 22px;
    border: none;
    background-color: transparent;
    cursor: pointer;
    transition: color 0.45s cubic-bezier(0.23, 1, 0.32, 1); }
    @media screen and (max-width: 600px) {
      .button-wrapper--reset input {
        font-size: 18px; } }
    @media screen and (min-width: 1400px) {
      .button-wrapper--reset input {
        font-size: 20px; } }
    @media screen and (max-width: 600px) {
      .button-wrapper--reset input {
        line-height: 22px; } }
    @media screen and (min-width: 1400px) {
      .button-wrapper--reset input {
        line-height: 24px; } }
  .button-wrapper--reset::before, .button-wrapper--reset::after {
    margin: 0;
    border: none;
    border-radius: 0;
    position: absolute;
    left: 0;
    top: 13px;
    content: '';
    width: 12px;
    height: 2px;
    background-color: var(--color-primary); }
  .button-wrapper--reset::before {
    transform: rotate(45deg); }
  .button-wrapper--reset::after {
    transform: rotate(-45deg); }
  .has-mouse .button-wrapper--reset:hover input {
    transition: color 0.25s cubic-bezier(0.25, 0.46, 0.45, 0.94);
    color: var(--color-primary); }

.button-wrapper--file label {
  width: auto; }
  .has-mouse .button-wrapper--file label:hover {
    transition: color 0.25s cubic-bezier(0.25, 0.46, 0.45, 0.94), background-color 0.25s cubic-bezier(0.25, 0.46, 0.45, 0.94);
    background-color: var(--color-primary);
    color: #fff; }

.button-wrapper--file input {
  opacity: 0; }

/*# sourceMappingURL=../../_maps/components/class/class--button-wrapper.css.map */