.button-one .btn-container {
  display: flex;
  flex-wrap: wrap;
  gap: var(--grid-gutter-width);
  align-items: center;
  font-family: var(--text-font);
}

.button-one .button-icon {
  display: inline-block;
  vertical-align: middle;
}

.button-one .button-icon-wrapper {
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 32px;
  height: 32px;
}

.button-one .button-icon-default,
.button-one .button-icon-hover {
  position: absolute;
  top: 0;
  left: 0;
  width: 32px;
  height: 32px;
  transition: opacity 0.2s ease;
}

.button-one .button-icon-default {
  opacity: 1;
}

.button-one .button-icon-hover {
  opacity: 0;
}

.button-one .btn-primary:hover .button-icon-default,
.button-one .btn-secondary:hover .button-icon-default,
.button-one .btn-tertiary:hover .button-icon-default {
  opacity: 0;
}

.button-one .btn-primary:hover .button-icon-hover,
.button-one .btn-secondary:hover .button-icon-hover,
.button-one .btn-tertiary:hover .button-icon-hover {
  opacity: 1;
}

.button-one
  .btn-primary:hover
  .button-icon-wrapper:not(:has(.button-icon-hover))
  .button-icon-default,
.button-one
  .btn-secondary:hover
  .button-icon-wrapper:not(:has(.button-icon-hover))
  .button-icon-default,
.button-one
  .btn-tertiary:hover
  .button-icon-wrapper:not(:has(.button-icon-hover))
  .button-icon-default {
  opacity: 1;
}

.button-one .btn-primary {
  text-decoration: var(--primary-button-text-underline);
  outline: none;
  flex-direction: var(--primary-button-icon-position);
  transition: 0.2s all ease;
  font-size: var(--primary-button-text-size-desktop);
  font-weight: var(--primary-button-text-bold);
  font-style: var(--primary-button-text-italic);
  line-height: var(--primary-button-text-line-height-desktop);
  letter-spacing: var(--primary-button-text-font-spacing-desktop);
  border-top-left-radius: var(--primary-button-radius-top-desktop);
  border-top-right-radius: var(--primary-button-radius-right-desktop);
  border-bottom-right-radius: var(--primary-button-radius-bottom-desktop);
  border-bottom-left-radius: var(--primary-button-radius-left-desktop);
  padding-top: var(--primary-button-spacing-padding-top-desktop);
  padding-right: var(--primary-button-spacing-padding-right-desktop);
  padding-bottom: var(--primary-button-spacing-padding-bottom-desktop);
  padding-left: var(--primary-button-spacing-padding-left-desktop);
  display: inline-flex;
  gap: 7px;
  align-items: center;
  width: var(--primary-button-width-desktop);
  height: var(--primary-button-height-desktop);
  margin-top: var(--primary-button-spacing-margin-top-desktop);
  margin-right: var(--primary-button-spacing-margin-right-desktop);
  margin-bottom: var(--primary-button-spacing-margin-bottom-desktop);
  margin-left: var(--primary-button-spacing-margin-left-desktop);
  font-family: var(--primary-button-text-font);
  /* background-image: linear-gradient(
    calc(var(--primary-button-background-gradient-angle-desktop) * 1deg),
    var(--primary-button-background-gradient-primary-color)
      calc(
        var(--primary-button-background-gradient-primary-location-desktop) *
          1%
      ),
    var(--primary-button-background-gradient-secondary-color)
      calc(
        var(--primary-button-background-gradient-secondary-location-desktop) *
          1%
      )
  ); */
  /* background-image: radial-gradient(
    circle,
    var(--primary-button-background-gradient-primary-color)
      calc(
        var(--primary-button-background-gradient-primary-location-desktop) *
          1%
      ),
    var(--primary-button-background-gradient-secondary-color)
      calc(
        var(--primary-button-background-gradient-secondary-location-desktop) *
          1%
      )
  ); */

  background: var(--primary-button-background-color);
  background-size: cover;
  background-position: center;
  color: var(--primary-button-text-color);
  border-width: var(--primary-button-border-width-desktop,0);
  border-style: var(--primary-button-border-type);
  border-color: var(--primary-button-border-color);
  box-shadow: var(--primary-button-border-horizontal)
    var(--primary-button-border-vertical) var(--primary-button-border-blur)
    var(--primary-button-border-spread)
    var(--primary-button-border-shadow-color);
}

.button-one .btn-primary:hover {
  font-size: var(
    --primary-hover-button-text-font-size-desktop,
    var(--primary-button-text-size-desktop)
  );
  font-weight: var(
    --primary-hover-button-text-font-option,
    var(--primary-button-text-bold)
  );
  text-decoration: var(--primary-hover-button-text-underline);
  flex-direction: var(--primary-hover-button-icon-position);
  font-style: var(
    --primary-hover-button-text-italic,
    var(--primary-button-text-italic)
  );
  line-height: var(
    --primary-hover-button-text-line-height-desktop,
    var(--primary-button-text-line-height-desktop)
  );
  letter-spacing: var(
    --primary-hover-button-text-font-spacing-desktop,
    var(--primary-button-text-font-spacing-desktop)
  );
  font-family: var(
    --primary-hover-button-text-font,
    var(--primary-button-text-font)
  );

  background: var(
    --primary-hover-button-background-color,
    var(--primary-button-background-color)
  );
  background-size: cover;
  background-position: center;
  color: var(
    --primary-hover-button-text-color,
    var(--primary-button-text-color)
  );
  border-width: var(--primary-hover-button-border-width-desktop,0);
  border-style: var(--primary-hover-button-border-type);
  border-color: var(--primary-hover-button-border-color);
}

.button-one .btn-secondary {
  text-decoration: var(--secondary-basic-button-text-underline);
  outline: none;
  flex-direction: var(--secondary-basic-button-icon-position);
  transition: 0.2s all ease;
  font-size: var(--secondary-basic-button-text-size-desktop);
  font-weight: var(--secondary-basic-button-text-bold);
  font-style: var(--secondary-basic-button-text-italic);
  line-height: var(--secondary-basic-button-text-line-height-desktop);
  letter-spacing: var(--secondary-basic-button-text-spacing-desktop);
  border-top-left-radius: var(--secondary-basic-button-radius-top-desktop);
  border-top-right-radius: var(--secondary-basic-button-radius-right-desktop);
  border-bottom-right-radius: var(
    --secondary-basic-button-radius-bottom-desktop
  );
  border-bottom-left-radius: var(--secondary-basic-button-radius-left-desktop);
  padding-top: var(--secondary-basic-button-spacing-padding-top-desktop);
  padding-right: var(--secondary-basic-button-spacing-padding-right-desktop);
  padding-bottom: var(--secondary-basic-button-spacing-padding-bottom-desktop);
  padding-left: var(--secondary-basic-button-spacing-padding-left-desktop);
  display: inline-flex;
  gap: 7px;
  align-items: center;
  width: var(--secondary-basic-button-width-desktop);
  height: var(--secondary-basic-button-height-desktop);
  margin-top: var(--secondary-basic-button-spacing-margin-top-desktop);
  margin-right: var(--secondary-basic-button-spacing-margin-right-desktop);
  margin-bottom: var(--secondary-basic-button-spacing-margin-bottom-desktop);
  margin-left: var(--secondary-basic-button-spacing-margin-left-desktop);
  font-family: var(--secondary-basic-button-text-font);
  background: var(--secondary-basic-button-background-color);
  background-size: cover;
  background-position: center;
  color: var(--secondary-basic-button-text-color);
  border-width: var(--secondary-basic-button-border-width-desktop,0);
  border-style: var(--secondary-basic-button-border-type);
  border-color: var(--secondary-basic-button-border-color);
  box-shadow: var(--secondary-basic-button-border-horizontal)
    var(--secondary-basic-button-border-vertical)
    var(--secondary-basic-button-border-blur)
    var(--secondary-basic-button-border-spread)
    var(--secondary-basic-button-border-shadow-color);
}

.button-one .btn-secondary:hover {
  font-size: var(
    --secondary-hover-button-text-font-size-desktop,
    var(--secondary-basic-button-text-size-desktop)
  );
  text-decoration: var(--secondary-hover-button-text-underline);
  flex-direction: var(--secondary-hover-button-icon-position);
  font-weight: var(
    --secondary-hover-button-text-font-option,
    var(--secondary-basic-button-text-bold)
  );
  font-style: var(
    --secondary-hover-button-text-italic,
    var(--secondary-basic-button-text-italic)
  );
  line-height: var(
    --secondary-hover-button-text-line-height-desktop,
    var(--secondary-basic-button-text-line-height-desktop)
  );
  letter-spacing: var(
    --secondary-hover-button-text-font-spacing-desktop,
    var(--secondary-basic-button-text-spacing-desktop)
  );
  font-family: var(
    --secondary-hover-button-text-font,
    var(--secondary-basic-button-text-font)
  );

  background: var(
    --secondary-hover-button-background-color,
    var(--secondary-basic-button-background-color)
  );
  background-size: cover;
  background-position: center;
  color: var(
    --secondary-hover-button-text-color,
    var(--secondary-basic-button-text-color)
  );
  border-width: var(
    --secondary-hover-button-border-width-desktop,
    var(--secondary-basic-button-border-width-desktop,0)
  );

  border-style: var(
    --secondary-hover-button-border-type,
    var(--secondary-basic-button-border-type)
  );

  border-color: var(
    --secondary-hover-button-border-color,
    var(--secondary-basic-button-border-color)
  );
}

.button-one .btn-tertiary {
  text-decoration: var(--tertiary-basic-button-text-underline);
  outline: none;
  flex-direction: var(--tertiary-basic-button-icon-position);
  transition: 0.2s all ease;
  font-size: var(--tertiary-basic-button-text-size-desktop);
  font-weight: var(--tertiary-basic-button-text-bold);
  font-style: var(--tertiary-basic-button-text-italic);
  line-height: var(--tertiary-basic-button-text-line-height-desktop);
  letter-spacing: var(--tertiary-basic-button-text-spacing-desktop);
  border-top-left-radius: var(--tertiary-basic-button-radius-top-desktop);
  border-top-right-radius: var(--tertiary-basic-button-radius-right-desktop);
  border-bottom-right-radius: var(
    --tertiary-basic-button-radius-bottom-desktop
  );
  border-bottom-left-radius: var(--tertiary-basic-button-radius-left-desktop);
  padding-top: var(--tertiary-basic-button-spacing-padding-top-desktop);
  padding-right: var(--tertiary-basic-button-spacing-padding-right-desktop);
  padding-bottom: var(--tertiary-basic-button-spacing-padding-bottom-desktop);
  padding-left: var(--tertiary-basic-button-spacing-padding-left-desktop);
  display: inline-flex;
  gap: 7px;
  align-items: center;
  width: var(--tertiary-basic-button-width-desktop);
  height: var(--tertiary-basic-button-height-desktop);
  margin-top: var(--tertiary-basic-button-spacing-margin-top-desktop);
  margin-right: var(--tertiary-basic-button-spacing-margin-right-desktop);
  margin-bottom: var(--tertiary-basic-button-spacing-margin-bottom-desktop);
  margin-left: var(--tertiary-basic-button-spacing-margin-left-desktop);
  font-family: var(--tertiary-basic-button-text-font);
  background: var(--tertiary-basic-button-background-color);
  background-size: cover;
  background-position: center;
  color: var(--tertiary-basic-button-text-color);
  border-width: var(--tertiary-basic-button-border-width-desktop,0);
  border-style: var(--tertiary-basic-button-border-type);
  border-color: var(--tertiary-basic-button-border-color);
  box-shadow: var(--tertiary-basic-button-border-horizontal)
    var(--tertiary-basic-button-border-vertical)
    var(--tertiary-basic-button-border-blur)
    var(--tertiary-basic-button-border-spread)
    var(--tertiary-basic-button-border-shadow-color);
}

.button-one .btn-tertiary:hover {
  font-size: var(
    --tertiary-hover-button-text-size-desktop,
    var(--tertiary-basic-button-text-size-desktop)
  );
  text-decoration: var(--tertiary-hover-button-text-underline);
  flex-direction: var(--tertiary-hover-button-icon-position);
  font-weight: var(
    --tertiary-hover-button-text-bold,
    var(--tertiary-basic-button-text-bold)
  );
  font-style: var(
    --tertiary-hover-button-text-italic,
    var(--tertiary-basic-button-text-italic)
  );
  line-height: var(
    --tertiary-hover-button-text-line-height-desktop,
    var(--tertiary-basic-button-text-line-height-desktop)
  );
  letter-spacing: var(
    --tertiary-hover-button-text-spacing-desktop,
    var(--tertiary-basic-button-text-spacing-desktop)
  );
  text-decoration: var(
    --tertiary-hover-button-text-underline,
    var(--tertiary-basic-button-text-underline)
  );
  border-top-left-radius: var(
    --tertiary-hover-button-radius-top-desktop,
    var(--tertiary-basic-button-radius-top-desktop)
  );

  border-top-right-radius: var(
    --tertiary-hover-button-radius-right-desktop,
    var(--tertiary-basic-button-radius-right-desktop)
  );

  border-bottom-right-radius: var(
    --tertiary-hover-button-radius-bottom-desktop,
    var(--tertiary-basic-button-radius-bottom-desktop)
  );

  border-bottom-left-radius: var(
    --tertiary-hover-button-radius-left-desktop,
    var(--tertiary-basic-button-radius-left-desktop)
  );
  font-family: var(
    --tertiary-hover-button-text-font,
    var(--tertiary-basic-button-text-font)
  );
  background: var(
    --tertiary-hover-button-background-color,
    var(--tertiary-basic-button-background-color)
  );
  background-size: cover;
  background-position: center;
  color: var(
    --tertiary-hover-button-text-color,
    var(--tertiary-basic-button-text-color)
  );
  border-width: var(
    --tertiary-hover-button-border-width-desktop,
    var(--tertiary-basic-button-border-width-desktop,0)
  );

  border-style: var(
    --tertiary-hover-button-border-type,
    var(--tertiary-basic-button-border-type)
  );

  border-color: var(
    --tertiary-hover-button-border-color,
    var(--tertiary-basic-button-border-color)
  );
  box-shadow: var(
      --tertiary-hover-button-border-horizontal,
      var(--tertiary-basic-button-border-horizontal)
    )
    var(
      --tertiary-hover-button-border-vertical,
      var(--tertiary-basic-button-border-vertical)
    )
    var(
      --tertiary-hover-button-border-blur,
      var(--tertiary-basic-button-border-blur)
    )
    var(
      --tertiary-hover-button-border-spread,
      var(--tertiary-basic-button-border-spread)
    )
    var(
      --tertiary-hover-button-border-shadow-color,
      var(--tertiary-basic-button-border-shadow-color)
    );
}