@mixin applyAdminButtonStyles() {
  display: inline-block;
  
  border-color: transparent;

  height: auto;

  padding-top: calculateRem(6);
  padding-right: calculateRem(30);
  padding-bottom: calculateRem(6);
  padding-left: calculateRem(30);
  
  text-align: center;
  font-weight: 400;
  cursor: pointer;

  box-shadow: 0 2px 4px 0 rgba(0,0,0,0.20);

  &:hover {
    box-shadow: 0 5px 5px -3px rgba(0, 0, 0, 0.20), 0 3px 14px 2px rgba(0, 0, 0, 0.14);
  }
}

@mixin applyButtonStyles($specification: '') {
  display: inline-block;
  border-radius: 2px;
  border-color: transparent;

  text-transform: uppercase;
  font-family: $body-font-family;
  font-weight: 600;
  cursor: pointer;

  height: auto;
  width: max-content;
  @if (str-index($specification, 'small')) {
    font-size: 14px;
    line-height: 18px;
    padding-top: calculateRem(10);
    padding-right: calculateRem(10);
    padding-bottom: calculateRem(10);
    padding-left: calculateRem(10);
  }
  @else {
    font-size: 16px;
    line-height: 20px;
    padding-top: calculateRem(12);
    padding-right: calculateRem(20);
    padding-bottom: calculateRem(12);
    padding-left: calculateRem(20);
  }
  @if (str-index($specification, 'ghost') and not(str-index($specification, 'dark-ghost')) and not(str-index($specification, 'primary-ghost')) and not(str-index($specification, 'secondary-ghost')) and not(str-index($specification, 'tertiary-ghost'))) {
    color: $light;
    background-color: transparent;
    border: 2px solid $light;
    &:hover {
      color: $dark;
      background-color: $light;
    }
  }
  @if (str-index($specification, 'dark-ghost')) {
    color: $dark;
    background-color: transparent;
    border: 2px solid $dark;
    &:hover {
      color: $light;
      background-color: $dark;
    }
  }
  @if (str-index($specification, 'primary-ghost')) {
    color: $primary-color;
    background-color: transparent;
    border: 2px solid $primary-color;
    &:hover {
      color: setTextColor($primary-color);
      background-color: $primary-color;
    }
  }
  @if (str-index($specification, 'secondary-ghost')) {
    color: $secondary-color;
    background-color: transparent;
    border: 2px solid $secondary-color;
    &:hover {
      color: setTextColor($secondary-color);
      background-color: $secondary-color;
    }
  }
  @if (str-index($specification, 'tertiary-ghost')) {
    color: $tertiary-color;
    background-color: transparent;
    border: 2px solid $tertiary-color;
    &:hover {
      color: setTextColor($tertiary-color);
      background-color: $tertiary-color;
    }
  }
}

@mixin breakpoint($device) {
   @if $device == desktop {
     @media (min-width: 1120px) { @content ; }
  }
   @else if $device == laptop {
     @media (min-width: 1024px) { @content ; }
  }
    @else if $device == tablet {
     @media (min-width: 800px) { @content ; }
  }
   @else if $device == phablet {
     @media (min-width: 600px)  { @content ; }
  }
  @else if $device == mobile {
     @media (min-width: 0px)  { @content ; }
  }
  @else if $device == mobileonly {
     @media (max-width: 799px)  { @content ; }
  }
}
