@import './../../functions', './../../mixins', './../../variables';

$search-icon: (
  'width': 24,
  'height': 24,
);

@layer base {
  button.search {
    width: px-to-rem(get-map($search-icon, 'width'));
    height: px-to-rem(get-map($search-icon, 'height'));
    background: transparent;
    margin: 0;
    padding: 0;
    border: none;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;

    &::before {
      @include transition(background, 0.3s, ease);
      @include image('icons/magnifying-glass.svg', true);

      content: '';
      width: px-to-rem(get-map($search-icon, 'width'));
      height: px-to-rem(get-map($search-icon, 'height'));
      background: get-map($theme, 'form_search-button_bg');
      display: block;
    }
  }
}
