// RAMEN ICON BUTTON COMPONENT
//
//
// Required Global Variables:
// $global-transition-speed
// $global-easing
//
//
// Required Component Variables:
//
// $button-icon-background-color: Background colour for the button
// $button-icon-border: Border styles for the button
// $button-icon-hover-background-color: Background colour on hover
// $button-icon-fill-color: Icon fill colour
// $button-icon-hover-fill-color: Icon fill colour on hover

// $button-icon-secondary-background-color: Secondary background colour for the button
// $button-icon-secondary-border: Secondary Border styles for the button
// $button-icon-secondary-hover-background-color: Secondary Background colour on hover
// $button-icon-secondary-fill-color: Secondary Icon fill colour on hover
// $button-icon-secondary-hover-fill-color: Secondary icon fill colour on hover

// $button-icon-size: Button size
// $button-icon-size-medium: Button size - Medium screens
// $button-icon-large-size: Large button size
// $button-icon-large-size-medium: Large button size - Medium screens

// $button-icon-icon-size: Button icon size
// $button-icon-icon-size-medium: Button icon size - Medium screens
// $button-icon-large-icon-size: Large button icon size
// $button-icon-large-icon-size-medium: Large button icon size - Medium screens
//
//

@mixin button-icon {
  &,
  &:link,
  &:visited {
    -webkit-appearance: none;
    background-color: $button-icon-background-color;
    border: $button-icon-border;
    display: block;
    height: $button-icon-size;
    margin: 0;
    outline: none;
    position: relative;
    transition: background-color $global-transition-speed $global-easing;
    width: $button-icon-size;

    @include breakpoint($bp-medium) {
      height: $button-icon-size-medium;
      width: $button-icon-size-medium;
    }

    &:hover {
      background-color: $button-icon-hover-background-color;

      .c-button-icon__icon {
        fill: $button-icon-hover-fill-color;
      }
    }

    &:before {
      content: '';
      position: absolute;
      top: 0;
      right: 0;
      bottom: 0;
      left: 0;
    }
  }
}

@mixin button-icon-icon {
  display: block;
  fill: $button-icon-fill-color;
  height: $button-icon-icon-size;
  left: 50%;
  line-height: 1;
  position: absolute;
  top: 50%;
  transform: translate(-50%, -50%);
  transition: fill $global-transition-speed $global-easing 0s;
  width: $button-icon-icon-size;

  @include breakpoint($bp-medium) {
    height: $button-icon-icon-size-medium;
    width: $button-icon-icon-size-medium;
  }
}

@mixin button-icon-large {
  height: $button-icon-large-size;
  width: $button-icon-large-size;

  @include breakpoint($bp-medium) {
    height: $button-icon-large-size-medium;
    width: $button-icon-large-size-medium;
  }

  .c-button-icon__icon {
    height: $button-icon-large-icon-size;
    width: $button-icon-large-icon-size;

    @include breakpoint($bp-medium) {
      height: $button-icon-large-icon-size-medium;
      width: $button-icon-large-icon-size-medium;
    }
  }
}

@mixin button-icon-secondary {
  background-color: $button-icon-secondary-background-color;
  border: $button-icon-secondary-border;

  .c-button-icon__icon {
    fill: $button-icon-secondary-fill-color;
  }

  &:hover {
    background-color: $button-icon-secondary-hover-background-color;

    .c-button-icon__icon {
      fill: $button-icon-secondary-hover-fill-color;
    }
  }
}

.c-button-icon {
  @include button-icon;

  &__text {
    @include visually-hidden;
  }

  &__icon {
    @include button-icon-icon;
  }

  &--large {
    @include button-icon-large;
  }

  &--secondary {
    @include button-icon-secondary;
  }
}