/* stylelint-disable no-descending-specificity */

a,
button {
  &.btn {
    &.btn-link {
      .icon {
        fill: $link-color;
      }

      &:not(:disabled, .disabled) {
        &:focus .icon,
        &:hover .icon {
          fill: $link-hover-color;
        }
      }

      &-secondary {
        background-color: transparent;
        color: $secondary;
        
        .icon {
          fill: $secondary;
        }

        &:not(:disabled, .disabled) {
          &:focus,
          &:hover {
            color: $link-hover-color;
            text-decoration: underline;

            .icon {
              fill: $link-hover-color;
            }
          }
        }
      }

      &:disabled,
      &.disabled {
        .icon {
          fill: $btn-link-disabled-color;
        }
      }
    }
   
    &.btn-outline-globus {
      color: $primary;
      border-color: $secondary;
      background-color: $white;

      .icon {
        fill: $secondary;
      }

      &:not(:disabled, .disabled) {
        &:hover,
        &:focus,
        &:active,
        &.active {
          color: $primary;
          border-color: $primary;

          .icon {
            fill: $primary;
          }
        }
      }
    }

    &.unstyled {
      color: $body-color !important;
    }
  }
}

@each $color, $value in $theme-colors {
  a,
  button {
    &.btn {
      // icons
      &.btn-#{$color} {
        .icon {
          fill: color-contrast($value);
        }

        &.btn-hover-#{$color}:not(:disabled, .disabled) {
          &:hover,
          &:focus {
            .icon {
              fill: color-contrast($value);
            }
          }
        }
      }

      &[class*="btn-link"].btn-hover-#{$color}:not(:disabled, .disabled) {
        &:hover,
        &:focus {
          .icon {
            fill: $value;
          }
        }
      }

      &.btn-outline-#{$color} {
        .icon {
          fill: $value;
        }

        &:not(:disabled, .disabled) {
          &:active,
          &.active,
          &:hover {
            .icon {
              fill: color-contrast($value);
            }
          }
        }
      }

      &[class*="btn-outline-"] {
        &.btn-hover-#{$color}:not(:disabled, .disabled) {
          &:active,
          &.active,
          &:hover {
            .icon {
              fill: $value;
            }
          }
        }
      }

      &:not(:disabled, .disabled) {
        &:hover,
        &:focus,
        &:active,
        &.active {
          .fill-hover-#{$color} {
            fill: $value !important;
          }
        }
      }

      // additional btn classes
      &.btn-hover-#{$color}:not(:disabled, .disabled) {
        &:hover,
        &:focus {
          background-color: $value;
          border-color: $value;
          color: color-contrast($value);

          .icon {
            fill: color-contrast($value);
          }
        }

        &.btn-link,
        &.btn-link-secondary {
          &:hover,
          &:focus {
            background-color: transparent;
            border-color: transparent;
            color: $value;

            .icon {
              fill: $value;
            }
          }
        }

        &[class*='btn-outline-'] {
          &:hover,
          &:focus {
            background-color: transparent;
            color: $value;
            border-color: $value;

            .icon {
              fill: $value;
            }
          }
        }
        
        &:active,
        &.active,
        &:focus {
          box-shadow: 0 0 0 0.2rem rgba($value, 0.5);
        }
      }
    }
  }
}