/**
 * @file
 * Button Styles
 */
 
 :root {
  --button-circle-arrow--height: 9px;
  --button-circle-arrow--right: 6px;
  --button-circle-arrow--width: 14px;
  --button-circle: 27px;
 }

 .submit-btn {
  display: inline-block;
  position: relative;

  &::before,
  &::after {
    content:'';
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    transition: right var(--transition-dur), background-color var(--transition-dur);
  }

  &::before {
    background-color: var(--color--light-accent-1);
    border-radius: 100%;
    height: var(--button-circle);
    right: 0;
    width: var(--button-circle);
  }

  &::after {
    background-color: var(--color--primary);
    height: var(--button-circle-arrow--height);
    mask-image: url('../../dist/public/icons/arrow.svg');
    mask-repeat: no-repeat;
    mask-size: contain;
    right: var(--button-circle-arrow--right);
    width: var(--button-circle-arrow--width);
  }
 }

.submit-btn input {
  background-color: unset;
  border: none;
  color: var(--color--primary);
  cursor: pointer;
  display: block;
  font-size: var(--font-size--h5);
  font-weight: 600;
  letter-spacing: var(--letter-spacing--h5);
  /* outline: 0; TEMP REMOVAL */
  padding: 0 calc(var(--gap-static--xxxs) + 2px + var(--button-circle)) 0 0;
  transition: padding var(--transition-dur);

  &:hover {
    color: var(--color--dark-accent-2);
    padding: 0 calc(var(--gap-static--xxxs) + 5px + var(--button-circle)) 0 0;
  }
}