@import '../styles/variables.css';

/*Main Styles*/
.base {
  composes: button-marg-1  from '../styles.css';
  composes: button-pad-1 from '../styles.css';
  composes: default-text from '../styles.css';
  composes: cursor-pointer from '../styles.css';
  composes: primary-button-border-width from '../styles.css';
  composes: default-font from '../styles.css';
  composes: rounded from '../styles.css';
  text-decoration: none;
  display: inline-block;
  vertical-align: middle;
  line-height: 1.125rem;
  -webkit-appearance: none;
  font-size: 1.0625rem;
  border-style: solid;
}

.uppercase {
  text-transform: uppercase;
}

.base:hover {
  text-decoration: none;
}

.default_btn {
  composes: base;
}
.default_btn_hover {
  composes: hover-bg-gray from '../styles.css';
  composes: hover-white from '../styles.css';
  composes: hover-border-default from '../styles.css';
}
.default_btn:active {
  box-shadow: inset 0 0 0 20rem var(--darken-2),
  inset 0 3px 4px 0 var(--darken-3),
  0 0 1px var(--darken-2);
}
.default_btn:disabled {
  box-shadow: inset 0 0 0 20rem var(--darken-1);
}

.outline {
  composes: base;
  composes: bg-transparent from '../styles.css';
}
.outline:active {
  box-shadow: inset 0 0 0 20rem var(--darken-2),
  inset 0 3px 4px 0 var(--darken-3),
  0 0 1px var(--darken-2);
}
.outline:disabled {
  opacity: .5;
}

/*default button variant*/
.primary {
  composes: bg-primary from '../styles.css';
  composes: border-primary from '../styles.css';
  composes: white from '../styles.css';
}
.primary_hover {
  composes: hover-bg-primary from '../styles.css';
  composes: hover-border-primary from '../styles.css';
}
.button {
  composes: base;
}
.secondary {
  composes: bg-secondary from '../styles.css';
  composes: border-secondary from '../styles.css';
  composes: inverse-blue-text from '../styles.css';
}
.secondary_hover {
  composes: hover-bg-secondary from '../styles.css';
  composes: hover-border-secondary from '../styles.css';
}

.warning {
  composes: white from '../styles.css';
  composes: bg-warning from '../styles.css';
  composes: border-warning from '../styles.css';
}
.warning_hover {
  composes: hover-bg-warning from '../styles.css';
  composes: hover-border-warning from '../styles.css';
}

/* TODO: Remove hardcoded color values and
 * compose from styles.css */
.error {
  composes: white from '../styles.css';
  composes: bg-error from '../styles.css';
  composes: border-error from '../styles.css';
}
.error_hover {
  composes: hover-bg-error from '../styles.css';
  composes: hover-border-error from '../styles.css';
}

.link {
  composes: base;
  composes: border-none from '../styles.css';
  composes: sky-blue from '../styles.css';
  composes: border-transparent from '../styles.css';
  composes: bg-transparent from '../styles.css';
}
.link_hover {
  composes: hover-bg-link from '../styles.css';
  composes: hover-secondary-text from '../styles.css';
}

/*Outline styles*/
.default_btn_outline {
  composes:outline;
  composes: hover-bg-gray from '../styles.css';
  composes: hover-white from '../styles.css';
  composes: hover-border-default from '../styles.css';
}
.primary_outline{
  composes: outline;
  composes: sky-blue from '../styles.css';
  composes: hover-bg-primary from '../styles.css';
  composes: hover-white from '../styles.css';
  composes: border-primary from '../styles.css';
  composes: hover-border-primary from '../styles.css';
}
.button_outline {
  composes: outline;
  composes: hover-bg-gray from '../styles.css';
  composes: hover-border-default from '../styles.css';
  composes: hover-white from '../styles.css';
}
.secondary_outline {
  composes: outline;
  composes: blue from '../styles.css';
  composes: hover-bg-secondary from '../styles.css';
  composes: border-secondary from '../styles.css';
  composes: hover-white from '../styles.css';
  composes: hover-border-secondary from '../styles.css';
}

.success_outline {
  composes: outline;
  composes: green from '../styles.css';
  composes: hover-bg-green from '../styles.css';
  composes: hover-white from '../styles.css';
  composes: border-green from '../styles.css';
}

.warning_outline {
  composes: outline;
  composes: orange from '../styles.css';
  composes: hover-bg-warning from '../styles.css';
  composes: hover-white from '../styles.css';
  composes: border-warning from '../styles.css';
  composes: hover-border-warning from '../styles.css';
}

.error_outline {
  composes: outline;
  composes: red from '../styles.css';
  composes: hover-bg-error from '../styles.css';
  composes: hover-white from '../styles.css';
  composes: border-error from '../styles.css';
  composes: hover-border-error from '../styles.css';
}

.link_outline {
  composes: outline;
  composes: primary-text from '../styles.css';
  composes: bg-transparent from '../styles.css';
  composes: border-none from '../styles.css';
}
.link_outline:hover {
  text-decoration:underline;
}
.disabled {
  composes: cursor-not-allowed from '../styles.css';
  text-decoration: none;
  opacity: .65;
}

/*button sizes*/
.large {
  padding: 1rem 1.25rem;
  font-size: 1.25rem;
}

.small {
  padding: .25rem .5rem;
  font-size: .85rem;
}

/*block style*/
.block {
  display: block;
  width: 100%;
}

.icon-left {
  margin-right: 1rem;
}