@import '../../scss/includes/components';

:host {
  @extend %component-host;

  --primary-solid-background: var(--anywhere-primary);
  --primary-solid-color: var(--anywhere-primary-text-color);
  --primary-solid-hover-background: var(--anywhere-primary-hover);
  --secondary-solid-background: var(--anywhere-secondary);
  --secondary-solid-color: var(--anywhere-secondary-text-color);
  --secondary-solid-border-color: var(--anywhere-secondary-border);
  --secondary-solid-hover-background: var(--anywhere-secondary-hover);
  --success-solid-background: var(--anywhere-success);
  --success-solid-color: var(--anywhere-success-text-color);
  --success-solid-hover-background: var(--anywhere-success-hover);
  --danger-solid-background: var(--anywhere-danger);
  --danger-solid-color: var(--anywhere-danger-text-color);
  --danger-solid-hover-background: var(--anywhere-danger-hover);
  --warn-solid-background: var(--anywhere-warn);
  --warn-solid-color: var(--anywhere-warn-text-color);
  --warn-solid-hover-background: var(--anywhere-warn-hover);
  --info-solid-background: var(--anywhere-info);
  --info-solid-color: var(--anywhere-info-text-color);
  --info-solid-hover-background: var(--anywhere-info-hover);

  --primary-gradient-color: var(--anywhere-primary-text-color);
  --primary-gradient-background-fallback: var(--anywhere-primary);
  --primary-gradient-background: linear-gradient(
    to right,
    var(--anywhere-primary-gradient-1),
    var(--anywhere-primary-gradient-2)
  );
  --secondary-gradient-color: var(--anywhere-secondary-text-color);
  --secondary-gradient-background-fallback: var(--anywhere-secondary);
  --secondary-gradient-background: linear-gradient(
    to right,
    var(--anywhere-secondary-gradient-1),
    var(--anywhere-secondary-gradient-2)
  );
  --success-gradient-color: var(--anywhere-success-text-color);
  --success-gradient-background-fallback: var(--anywhere-success);
  --success-gradient-background: linear-gradient(
    to right,
    var(--anywhere-success-gradient-1),
    var(--anywhere-success-gradient-2)
  );
  --danger-gradient-color: var(--anywhere-danger-text-color);
  --danger-gradient-background-fallback: var(--anywhere-danger);
  --danger-gradient-background: linear-gradient(
    to right,
    var(--anywhere-danger-gradient-1),
    var(--anywhere-danger-gradient-2)
  );
  --warn-gradient-color: var(--anywhere-warn-text-color);
  --warn-gradient-background-fallback: var(--anywhere-warn);
  --warn-gradient-background: linear-gradient(
    to right,
    var(--anywhere-warn-gradient-1),
    var(--anywhere-warn-gradient-2)
  );
  --info-gradient-color: var(--anywhere-info-text-color);
  --info-gradient-background-fallback: var(--anywhere-info);
  --info-gradient-background: linear-gradient(
    to right,
    var(--anywhere-info-gradient-1),
    var(--anywhere-info-gradient-2)
  );

  --primary-outline-color: var(--anywhere-primary);
  --primary-outline-background: var(--anywhere-primary-towhite);
  --primary-outline-border-color: var(--anywhere-primary);
  --primary-outline-hover-border-color: var(--anywhere-primary-hover);
  --primary-outline-hover-color: var(--anywhere-primary-hover);
  --secondary-outline-color: var(--anywhere-secondary-text-color);
  --secondary-outline-border-color: var(--anywhere-secondary-text-color);
  --secondary-outline-background: var(--anywhere-secondary);
  --secondary-outline-hover-color: var(--anywhere-secondary-hover-border);
  --secondary-outline-hover-border-color: var(
    --anywhere-secondary-hover-border
  );
  --success-outline-color: var(--anywhere-success);
  --success-outline-background: var(--anywhere-success-towhite);
  --success-outline-border-color: var(--anywhere-success);
  --success-outline-hover-color: var(--anywhere-success-hover);
  --success-outline-hover-border-color: var(--anywhere-success-hover);
  --danger-outline-color: var(--anywhere-danger);
  --danger-outline-background: var(--anywhere-danger-towhite);
  --danger-outline-border-color: var(--anywhere-danger);
  --danger-outline-hover-color: var(--anywhere-danger-hover);
  --danger-outline-hover-border-color: var(--anywhere-danger-hover);
  --warn-outline-color: var(--anywhere-warn);
  --warn-outline-border-color: var(--anywhere-warn);
  --warn-outline-background: var(--anywhere-warn-towhite);
  --warn-outline-hover-color: var(--anywhere-warn-hover);
  --warn-outline-hover-border-color: var(--anywhere-warn-hover);
  --info-outline-color: var(--anywhere-info);
  --info-outline-border-color: var(--anywhere-info);
  --info-outline-background: var(--anywhere-info-towhite);
  --info-outline-hover-color: var(--anywhere-info-hover);
  --info-outline-hover-border-color: var(--anywhere-info-hover);
}

:host([disabled]) button,
.disabled {
  @extend %disabled;
  pointer-events: none;
  cursor: auto;
}

// sizes
:host([size='tiny']) button {
  font-size: 0.75rem;
  padding: 0.5625rem 1.0625rem;
  height: 35px;
}

:host([size='small']) button {
  font-size: 0.875rem;
  padding: 0.75rem 1.5rem;
  height: 43px;
}

:host([size='medium']) button {
  font-size: 0.875rem;
  padding: 1rem 1.8rem;
  height: 51px;
}

:host([size='large']) button {
  font-size: 0.9375rem;
  padding: 1.125rem 2rem;
  height: 59px;
}

:host([size='giant']) button {
  font-size: 1.125rem;
  padding: 1.3125rem 2.5rem;
  height: 67px;
}

@mixin handle-solid-style($status) {
  &.solid {
    background: var(--#{$status}-solid-background);
    color: var(--#{$status}-solid-color);
    @if $status == var(--status-secondary) {
      box-shadow: inset 0px 0px 0px 1px var(--#{$status}-solid-border-color);
    }

    &:hover {
      background: var(--#{$status}-solid-hover-background);
    }

    &:active {
      background: var(--#{$status}-solid-background) !important;
      transition: 100ms cubic-bezier(0.455, 0.03, 0.515, 0.955);
      box-shadow: 0 0 1px 3px var(--anywhere-#{$status}-border-1),
        0 0 0 5px var(--anywhere-#{$status}-border-2);
    }
  }
}

@mixin handle-gradient-style($status) {
  &.gradient {
    color: var(--#{$status}-gradient-color);
    background-color: var(--#{$status}-gradient-background-fallback);
    background: var(--#{$status}-gradient-background);
    @if $status == var(--status-secondary) {
      box-shadow: inset 0px 0px 0px 1px var(--#{$status}-gradient-border-color);
    }

    &:active {
      transition: 100ms cubic-bezier(0.455, 0.03, 0.515, 0.955);
      box-shadow: 0 0 1px 3px var(--anywhere-#{$status}-border-1),
        0 0 0 5px var(--anywhere-#{$status}-border-2);
    }
  }
}

@mixin handle-outline-style($status, $use-border: true) {
  $color: 'basic';
  @if $use-border {
    $color: 'outline';
  }

  &.#{$color} {
    color: var(--#{$status}-outline-color);
    background: var(--#{$status}-outline-background);
    @if $use-border == true {
      border: 1px solid var(--#{$status}-outline-border-color);
    }

    &:hover {
      color: var(--#{$status}-outline-hover-color);
      border-color: var(--#{$status}-outline-hover-border-color);
    }

    &:active {
      transition: 100ms cubic-bezier(0.455, 0.03, 0.515, 0.955);
      box-shadow: 0 0 2px 3px var(--anywhere-#{$status}-border-2);
    }
  }
}

@mixin handle-basic-style($style) {
  @include handle-outline-style($style, false);
}

%disabled {
  background: var(--anywhere-disabled) !important;
  color: var(--anywhere-disabled-text-color) !important;
  border-color: var(--anywhere-disabled) !important;
}

button {
  font-family: 'Open Sans', sans-serif;
  border: none;
  padding: 18px 25px;
  font-size: 15px;
  outline: none;
  transition: 150ms ease-in;
  cursor: pointer;
  text-transform: uppercase;
  align-items: center;

  span {
    display: flex;
    align-items: center;

    i {
      margin: 0 8px 0 0;
    }

    /** when icon mode is defined to right position */
    &.reverse {
      width: fit-content;
      flex-direction: row-reverse;

      i {
        margin: 0 0 0 8px;
      }
    }

    /** when onlyIcon attribute is true */
    &.no-margins {
      height: 20px;
      * {
        margin-left: 0;
        margin-right: 0;
      }
    }
  }

  &.responsive {
    width: 100%;
  }

  /* MODE */
  &.rounded {
    border-radius: 5rem;
  }
  &.square {
    border-radius: 3px;
  }
  &.radius {
    border-radius: 15px;
  }

  /* STATUS */
  &.primary {
    @include handle-solid-style(primary);
    @include handle-gradient-style(primary);
    @include handle-outline-style(primary);
    @include handle-basic-style(primary);
  }

  &.secondary {
    @include handle-solid-style(secondary);
    @include handle-gradient-style(secondary);
    @include handle-outline-style(secondary);
    @include handle-basic-style(secondary);
  }
  &.success {
    @include handle-solid-style(success);
    @include handle-gradient-style(success);
    @include handle-outline-style(success);
    @include handle-basic-style(success);
  }
  &.danger {
    @include handle-solid-style(danger);
    @include handle-gradient-style(danger);
    @include handle-outline-style(danger);
    @include handle-basic-style(danger);
  }
  &.warn {
    @include handle-solid-style(warn);
    @include handle-gradient-style(warn);
    @include handle-outline-style(warn);
    @include handle-basic-style(warn);
  }

  &.info {
    @include handle-solid-style(info);
    @include handle-gradient-style(info);
    @include handle-outline-style(info);
    @include handle-basic-style(info);
  }
}
