$border_radius: .3rem; 
$font_small: clamp( 1rem, 2.5vw, 1.2rem);
$font_medium: clamp(12px, 5vw , 1.5rem);
$font_large: clamp(1rem, 12vw, 2.5rem);
$font_color: #163577;
$font_color_secondary: #4f4f4f;




:host {
  --deepBlue: #00568E;
  --darkBlue: #0476A8;
  --oceanBlue: #009BC0;
  --skyBlue: #2EB9D3;
}
 
 .magnifying{
    width: 25px;
    height: 25px;
    margin: 0 10px 4px 0;
    display: flex;
    cursor: pointer;
    align-items: center;
    justify-content: center;
    padding: 3px;
    border-radius: 50%;
    transition: 300ms;
    border: 1px solid $font_color_secondary;
    box-shadow: 
    8px 8px 16px rgba(0,0,0, .12), 
    4px 4px 4px rgba(0,0,0, .12);
    &:active {
      scale: 0.87;
    }
    &:hover {
      transform: translateY(-2px);
    }
    svg {
      width: 70%;
      height: 70%;
    }
    path {
      fill: $font_color_secondary; 
    }
  }