@import 'variable.scss';
/* ==========================================================================
 *
 * File Name:         Button
 * Description:       Button styles with some cool animations
 * Editing Details:   Change button colours in the variable.scss file
 * Use:               Add the appropriate button class to any <a> tag that you
                      want to style as a button
 *
 ============================================================================ */

 //General button
%general-button {
  text-decoration: none;
  border: none;
  padding: 0.5rem 1rem;
  margin: 0.5rem 0.3rem;
  line-height: auto;
  background: beet;
  text-align: center;
  font-family: "Giulia";
  font-size: 16px;
}

/*
 * Media Query Font Size: Changing typescale across breakpoints
 *
 */
 @media only screen and (min-width: 0px) and (max-width: map-get($breakpoints,sm)) {
    button {
        font-size: $button-s;
    }
  }
  @media only screen and (min-width: map-get($breakpoints, sm)) and (max-width: map-get($breakpoints, md)) {
    button {
        font-size: $button-m;
    }
  }
  @media only screen and (min-width: map-get($breakpoints, md)) and (max-width: none) {
    button {
        font-size: $button-l;
    }
  }

//button width
.button-width-s {
  padding: 0.5rem 0.5rem;
}
.button-width-m {
  padding: 0.5rem 1rem;
}
.button-width-l {
  padding: 0.5rem 2rem;
}
.button-width-xl {
  padding: 0.5rem 3rem;
}

//button corner style
.button-sq {
  border-radius: 0px;
}
.button-semisquare {
  border-radius: 7px;
}
.button-semipill {
  border-radius: 13px;  
}
.button-pill {
  border-radius: 20px;  
}

//button style: filled
@mixin button-colour ($colour) {
    background: lighten($colour, 10%);
    color: $button-text-light;
  
    &:hover {
      background: darken($colour, 5%);
    }
  
    &:active {
      background: darken($colour, 25%);
    }
  }
.button-filled-beet {
    @include button-colour ($button-bkgd-beet);
}
.button-filled-kale {
    @include button-colour ($button-bkgd-kale);
}
.button-filled-tomatoe {
    @include button-colour ($button-bkgd-tomatoe);
}
.button-filled-deepwater {
    @include button-colour ($button-bkgd-deepwater);
}
.button-filled-dark {
    @include button-colour ($button-bkgd-dark);  
}
.button-filled-mute {
    @include button-colour ($button-bkgd-mute);
    color: $button-text-dark;
}
.button-filled-gray {
    @include button-colour ($button-bkgd-gray);  
    color: $button-text-dark;
}
.button-filled-peach {
    @include button-colour ($button-bkgd-peach);  
    color: $button-text-dark;
}

//button style: outlined
@mixin button-outlined ($colour) {
    border: solid $colour 1px;
    background: none;
    color: $colour;
  
    &:hover {
      background: darken($colour, 5%);
      color: $colour;
    }
  
    &:active {
      background: darken($colour, 25%);
      color: $colour;
    }
  }

.button-outlined-beet {
    @include button-outlined ($beet);
}
.button-outlined-kale {
    @include button-outlined ($kale);
}
.button-outlined-tomatoe {
    @include button-outlined ($tomatoe);
}
.button-outlined-deepwater {
    @include button-outlined ($deepwater);
}    
.button-outlined-dark {
    @include button-outlined ($dark);
}
.button-outlined-gray {
    @include button-outlined ($extra-dark-gray);
}