$css: '' !default;
$imported-modules: () !default;

@mixin export-module($module) {
  @if (index($imported-modules, $module) == null) {
    $imported-modules: append($imported-modules, $module) !global;
    @content;
  }
}

@mixin primary-button {
  background: var(--co-inphoto-primary-button-color);
  color: var(--co-inphoto-primary-button-text-color);
  border-color: var(--co-inphoto-primary-button-border-color);
  border-width: var(--co-inphoto-primary-button-border-width);
  border-radius: var(--co-inphoto-primary-button-border-radius);
  border-style: var(--co-inphoto-primary-button-border-style);
  padding: var(--co-inphoto-primary-button-padding);
  font-size: var(--co-inphoto-primary-button-text-size);
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  box-sizing: border-box;
  height: auto;
  .co-icon {
    width: var(--co-inphoto-primary-button-icon-width);
    height: var(--co-inphoto-primary-button-icon-height);
    color: var(--co-inphoto-primary-button-icon-color);
    svg {
      path, polygon {
        fill: var(--co-inphoto-primary-button-icon-color);
      }
    }
  }
  &:hover {
    background: var(--co-inphoto-primary-button-hover-color);
  }
}

@mixin secondary-button {
  background: var(--co-inphoto-secondary-button-color);
  color: var(--co-inphoto-secondary-button-text-color);
  border-color: var(--co-inphoto-secondary-button-border-color);
  border-width: var(--co-inphoto-secondary-button-border-width);
  border-radius: var(--co-inphoto-secondary-button-border-radius);
  border-style: var(--co-inphoto-secondary-button-border-style);
  padding: var(--co-inphoto-secondary-button-padding);
  font-size: var(--co-inphoto-secondary-button-text-size);
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  box-sizing: border-box;
  height: auto;
  .co-icon {
    width: var(--co-inphoto-secondary-button-icon-width);
    height: var(--co-inphoto-secondary-button-icon-height);
    color: var(--co-inphoto-secondary-button-icon-color);
    svg {
      path, polygon {
        fill: var(--co-inphoto-secondary-button-icon-color);
      }
    }
  }
  &:hover {
    background: var(--co-inphoto-secondary-button-hover-color);
  }
}

@mixin default-icon($width, $height, $color) {
  .co-icon {
    width: $width;
    height: $height;
    color: $color;
    svg {
      path, polygon, rect {
        fill: $color;
      }
    }
  }
}
