.root {
  border-radius: var(--round-corners);
  background-color: transparent;
  position: relative;
  display: inline-flex;
  justify-content: center;
  align-items: center;
  box-sizing: border-box;
  border: 0px solid transparent;

  & > * {
    margin: 0 var(--spacing-1) 0 0;
    /* convince safari */
    align-self: center;
  }
  & > *:last-child {
    margin: 0;
  }
}

.root.disabled {
  opacity: 0.4;
  cursor: default;
}

.fullWidth {
  display: flex;
  width: 100%;
  box-sizing: border-box;
}

.sizeSmall {
  composes: button from "coral-ui/shared/typography.css";
  padding: 4px 10px;
}

.sizeRegular {
  composes: button from "coral-ui/shared/typography.css";
  padding: 8px 15px;
}

.sizeLarge {
  composes: buttonLarge from "coral-ui/shared/typography.css";
  padding: 10px 15px;
}

.variantRegular {
  &.colorRegular {
    color: var(--palette-grey-main);
  }
  &.colorLight {
    color: var(--palette-text-light);
  }
  &.colorPrimary {
    color: var(--palette-primary-main);
  }
  &.colorError {
    color: var(--palette-error-main);
  }
  &.colorSuccess {
    color: var(--palette-success-main);
  }
  &.colorBrand {
    color: var(--palette-brand-main);
  }
  &.colorDark {
    color: var(--palette-text-primary);
  }

  &:not(.disabled) {
    &.colorRegular {
      &.mouseHover {
        color: var(--palette-grey-light);
      }
      &:active,
      &.active {
        color: var(--palette-grey-lighter);
      }
    }
    &.colorLight {
      &.mouseHover {
        opacity: 0.8;
      }
    }
    &.colorPrimary {
      &.mouseHover {
        color: var(--palette-primary-light);
      }
      &:active,
      &.active {
        color: var(--palette-primary-lighter);
      }
    }
    &.colorError {
      &.mouseHover {
        color: var(--palette-error-light);
      }
      &:active,
      &.active {
        color: var(--palette-error-lighter);
      }
    }
    &.colorSuccess {
      &.mouseHover {
        color: var(--palette-success-light);
      }
      &:active,
      &.active {
        color: var(--palette-success-lighter);
      }
    }
    &.colorBrand {
      &.mouseHover {
        color: var(--palette-brand-light);
      }
      &:active,
      &.active {
        color: var(--palette-brand-lighter);
      }
    }
    &.colorDark {
      /* @todo: What colors to use here.. */
      &.mouseHover {
        color: var(--palette-text-primary);
      }
      &:active,
      &.active {
        color: var(--palette-text-primary);
      }
    }
  }
}

.variantFilled, .variantOutlineFilled.mouseHover {
  color: var(--palette-text-light);
  &.colorRegular {
    background-color: var(--palette-grey-main);
  }
  &.colorPrimary {
    background-color: var(--palette-primary-main);
  }
  &.colorError {
    background-color: var(--palette-error-main);
  }
  &.colorSuccess {
    background-color: var(--palette-success-main);
  }
  &.colorBrand {
    background-color: var(--palette-brand-main);
  }
  &.colorDark {
    background-color: var(--palette-text-primary);
  }
} 

.variantOutlineFilled.mouseHover {
  border: 1px solid transparent; /* prevent jumping between outlined and filled on hover */
}

.variantFilled {
  &:not(.disabled) {
    &.colorRegular {
      &.mouseHover {
        background-color: var(--palette-grey-light);
      }
      &:active,
      &.active {
        background-color: var(--palette-grey-lighter);
      }
    }
    &.colorPrimary {
      &.mouseHover {
        background-color: var(--palette-primary-light);
      }
      &:active,
      &.active {
        background-color: var(--palette-primary-lighter);
      }
    }
    &.colorError {
      &.mouseHover {
        background-color: var(--palette-error-light);
      }
      &:active,
      &.active {
        background-color: var(--palette-error-lighter);
      }
    }
    &.colorSuccess {
      &.mouseHover {
        background-color: var(--palette-success-light);
      }
      &:active,
      &.active {
        background-color: var(--palette-success-lighter);
      }
    }
    &.colorBrand {
      &.mouseHover {
        background-color: var(--palette-brand-light);
      }
      &:active,
      &.active {
        background-color: var(--palette-brand-lighter);
      }
    }
    &.colorDark {
      /* @todo: What colors to use here.. */
      &.mouseHover {
        background-color: var(--palette-text-primary);
      }
      &:active,
      &.active {
        background-color: var(--palette-text-primary);
      }
    }
  }
}

.variantOutlined, .variantOutlineFilled:not(.mouseHover) {
  border: 1px solid transparent;
  &.colorRegular {
    color: var(--palette-grey-main);
    border: 1px solid currentColor;
  }
  &.colorPrimary {
    color: var(--palette-primary-main);
    border: 1px solid currentColor;
  }
  &.colorError {
    color: var(--palette-error-main);
    border: 1px solid currentColor;
  }
  &.colorSuccess {
    color: var(--palette-success-main);
    border: 1px solid currentColor;
  }
  &.colorBrand {
    color: var(--palette-brand-main);
    border: 1px solid currentColor;
  }
  &.colorDark {
    color: var(--palette-text-primary);
    border: 1px solid currentColor;
  }
}
.variantOutlined {
  &:not(.disabled) {
    &.colorRegular {
      &.mouseHover {
        color: var(--palette-grey-light);
        border: 1px solid currentColor;
      }
      &:active,
      &.active {
        color: var(--palette-grey-lighter);
        border: 1px solid currentColor;
      }
    }
    &.colorPrimary {
      &.mouseHover {
        color: var(--palette-primary-light);
        border: 1px solid currentColor;
      }
      &:active,
      &.active {
        color: var(--palette-primary-lighter);
        border: 1px solid currentColor;
      }
    }
    &.colorError {
      &.mouseHover {
        color: var(--palette-error-light);
        border: 1px solid currentColor;
      }
      &:active,
      &.active {
        color: var(--palette-error-lighter);
        border: 1px solid currentColor;
      }
    }
    &.colorSuccess {
      &.mouseHover {
        color: var(--palette-success-light);
        border: 1px solid currentColor;
      }
      &:active,
      &.active {
        color: var(--palette-success-lighter);
        border: 1px solid currentColor;
      }
    }
    &.colorBrand {
      &.mouseHover {
        color: var(--palette-brand-light);
        border: 1px solid currentColor;
      }
      &:active,
      &.active {
        color: var(--palette-brand-lighter);
        border: 1px solid currentColor;
      }
    }
    &.colorDark {
      &.mouseHover {
        color: var(--palette-text-primary);
        border: 1px solid currentColor;
      }
      &:active,
      &.active {
        color: var(--palette-text-primary);
        border: 1px solid currentColor;
      }
    }
  }
}

.variantGhost {
  border: 1px solid transparent;
  &.colorRegular {
    color: var(--palette-grey-main);
  }
  &.colorPrimary {
    color: var(--palette-primary-main);
  }
  &.colorError {
    color: var(--palette-error-main);
  }
  &.colorSuccess {
    color: var(--palette-success-main);
  }
  &.colorBrand {
    color: var(--palette-brand-main);
  }
  &.colorDark {
    color: var(--palette-text-primary);
  }

  &:not(.disabled) {
    &.colorRegular {
      &.mouseHover {
        border: 1px solid currentColor;
      }
      &:active,
      &.active {
        border: 1px solid currentColor;
        color: var(--palette-text-light);
        background-color: var(--palette-grey-main);
      }
    }
    &.colorPrimary {
      &.mouseHover {
        border: 1px solid currentColor;
      }
      &:active,
      &.active {
        border: 1px solid currentColor;
        color: var(--palette-text-light);
        background-color: var(--palette-primary-main);
      }
    }
    &.colorError {
      &.mouseHover {
        border: 1px solid currentColor;
      }
      &:active,
      &.active {
        border: 1px solid currentColor;
        color: var(--palette-text-light);
        background-color: var(--palette-error-main);
      }
    }
    &.colorSuccess {
      &.mouseHover {
        border: 1px solid currentColor;
      }
      &:active,
      &.active {
        border: 1px solid currentColor;
        color: var(--palette-text-light);
        background-color: var(--palette-success-main);
      }
    }
    &.colorBrand {
      &.mouseHover {
        border: 1px solid currentColor;
      }
      &:active,
      &.active {
        border: 1px solid currentColor;
        color: var(--palette-text-light);
        background-color: var(--palette-brand-main);
      }
    }
    &.colorDark {
      &.mouseHover {
        border: 1px solid currentColor;
      }
      &:active,
      &.active {
        border: 1px solid currentColor;
        color: var(--palette-text-light);
        background-color: var(--palette-text-primary);
      }
    }
  }
}

.variantUnderlined {
  padding-right: 0;
  padding-left: 0;
  border-radius: 0;
  border-bottom: 1px solid currentColor;
  padding: 0;

  &.colorRegular {
    color: var(--palette-grey-main);
  }
  &.colorLight {
    color: var(--palette-text-light);
  }
  &.colorPrimary {
    color: var(--palette-primary-main);
  }
  &.colorError {
    color: var(--palette-error-main);
  }
  &.colorSuccess {
    color: var(--palette-success-main);
  }
  &.colorBrand {
    color: var(--palette-brand-main);
  }
  &.colorDark {
    color: var(--palette-text-primary);
  }

  &:not(.disabled) {
    &.colorRegular {
      &.mouseHover {
        color: var(--palette-grey-light);
      }
      &:active,
      &.active {
        color: var(--palette-grey-lighter);
      }
    }
    &.colorLight {
      &.mouseHover {
        opacity: 0.8;
      }
    }
    &.colorPrimary {
      &.mouseHover {
        color: var(--palette-primary-light);
      }
      &:active,
      &.active {
        color: var(--palette-primary-lighter);
      }
    }
    &.colorError {
      &.mouseHover {
        color: var(--palette-error-light);
      }
      &:active,
      &.active {
        color: var(--palette-error-lighter);
      }
    }
    &.colorSuccess {
      &.mouseHover {
        color: var(--palette-success-light);
      }
      &:active,
      &.active {
        color: var(--palette-success-lighter);
      }
    }
    &.colorBrand {
      &.mouseHover {
        color: var(--palette-brand-light);
      }
      &:active,
      &.active {
        color: var(--palette-brand-lighter);
      }
    }
    &.colorDark {
      /* @todo: What colors to use here.. */
      &.mouseHover {
        color: var(--palette-text-primary);
      }
      &:active,
      &.active {
        color: var(--palette-text-primary);
      }
    }
  }
}

.variantAdornment {
  color: var(--palette-text-light);
  border-top-left-radius: 0;
  border-bottom-left-radius: 0;
  &.colorRegular {
    background-color: var(--palette-grey-main);
  }
  &.colorPrimary {
    background-color: var(--palette-primary-main);
  }
  &.colorError {
    background-color: var(--palette-error-main);
  }
  &.colorSuccess {
    background-color: var(--palette-success-main);
  }
  &.colorBrand {
    background-color: var(--palette-brand-main);
  }
  &.colorDark {
    background-color: var(--palette-text-primary);
  }

  &:not(.disabled) {
    &.colorRegular {
      &.mouseHover {
        background-color: var(--palette-grey-light);
      }
      &:active,
      &.active {
        background-color: var(--palette-grey-lighter);
      }
    }
    &.colorPrimary {
      &.mouseHover {
        background-color: var(--palette-primary-light);
      }
      &:active,
      &.active {
        background-color: var(--palette-primary-lighter);
      }
    }
    &.colorError {
      &.mouseHover {
        background-color: var(--palette-error-light);
      }
      &:active,
      &.active {
        background-color: var(--palette-error-lighter);
      }
    }
    &.colorSuccess {
      &.mouseHover {
        background-color: var(--palette-success-light);
      }
      &:active,
      &.active {
        background-color: var(--palette-success-lighter);
      }
    }
    &.colorBrand {
      &.mouseHover {
        background-color: var(--palette-brand-light);
      }
      &:active,
      &.active {
        background-color: var(--palette-brand-lighter);
      }
    }
    &.colorDark {
      /* @todo: What colors to use here.. */
      &.mouseHover {
        background-color: var(--palette-text-primary);
      }
      &:active,
      &.active {
        background-color: var(--palette-text-primary);
      }
    }
  }
}

.variantTextUnderlined {
  font-weight: 700;
  &:not(.disabled) {
    &.colorPrimary {
      &.mouseHover {
        color: var(--palette-primary-main);
        & > span {
          text-decoration: underline;
        }
      }
      &.active,
      &:active {
        color: var(--palette-primary-main);
      }
    }
    &.colorError {
      &.mouseHover {
        color: var(--palette-error-main);
        & > span {
          text-decoration: underline;
        }
      }
      &.active,
      &:active {
        color: var(--palette-error-main);
      }
    }
  }
}