/*
!!! IMPORTANT !!!

AN INPUT ELEMENT MUST BE SURROUNDED WITH A
LABEL ELEMENT FOR THIS TO WORK BECAUSE INPUT
ELEMENTS CANNOT TAKE PSEUDO ELEMENTS LIKE
:BEFORE AND :AFTER

THIS IS THEN USED ON THE LABEL ELEMENT!
*/
@mixin search-symbol-button(
  $size,
  $background-color,
  $symbol-color
) {
  //----------------------------------------
  // Calculate the symbols'
  // line thickness
  $border-size: $size/10;
  // Calculate the glass'
  // size
  $glass-size: $size/2;
  // Calculate the tilt'
  // width & height
  //$stick-size: $size/4;
  //
  //$stick-tilt-size: ($stick-size/1.4142) + ($border-size / 2);
  //$tilt-connection: ($glass-size*0.7853) + ($border-size / 2);
  //
  //$glass-tilt-size: $tilt-connection + $stick-tilt-size;
  //
  //$symbol-gutter: ($size - $glass-tilt-size)/2;

  //----------------------------------------
  // Start actual Styling
  //----------------------------------------
  position: relative;

  top: 0;
  left: 0;

  width: $size;
  height: $size;

  border: none;
  border-radius: $size;

  background-color: $background-color;

  &:before {
    content: "";
    display: block;
    box-sizing: border-box;

    position: absolute;

    bottom:$size / 5;
    left: $size / 3.75;

    width: 0;
    height: $size/4;

    border-left: solid $border-size $symbol-color;

    transform: rotate(45deg);

    z-index: 10000;
  }

  &:after {
    content: "";
    display: block;
    box-sizing: border-box;

    position: absolute;

    left: $size /3;
    top: $size /6.667;

    width: $glass-size;
    height: $glass-size;

    border: solid $border-size $symbol-color;
    border-radius: $glass-size;

    transform: rotate(45deg);

    z-index: 10000;
  }
}