@use "./config";
@use "../../../../styles/tokens/color";
@use "../../../../styles/tokens/base";
@use "../../../../styles/tokens/space";
@use "../../../../styles/tools/generate";
@use "../../../../styles/tools/convert";
@use "../../../../styles/typography/mixins" as typoMixins;
@use "../../../Button/styles/mixins" as buttonMixins;
@use "../../../Button/styles/config" as buttonConfig;

@mixin wrapper {
  position: relative;
  display: inline-block;
}

@mixin control {
  position: absolute;
  top: 0;
  left: 0;
  opacity: 0;
  width: 100%;
}

@mixin control-size($size, $sizes: config.$sizes) {
  @include generate.css-map($sizes, $size);
}

@mixin control-focused {
  outline: base.$focus-outline;
  outline-offset: base.$focusring-offset;
}

@mixin button {
  @include buttonMixins.base();
  @include buttonMixins.style("default", buttonConfig.$variants);

  margin-bottom: 0;
  position: relative;
  z-index: 1;
}

@mixin button-disabled($config: config.$disabled) {
  @include generate.css-map($config);

  &:hover {
    color: inherit;
    background-color: inherit;
    border-color: inherit;
  }
}

@mixin control-size($size, $sizes: config.$sizes) {
  @include generate.css-map($sizes, $size);
}

@mixin files {
  @include typoMixins.list-unstyled;

  width: 100%;
  margin-top: space.get("small");

  &:empty {
    display: none;
  }

  > li {
    word-break: break-all;
  }
}

@mixin drag-drop-highlight {
  outline: 2px dashed var(--color-border-accent);
  outline-offset: 2px;
}

@mixin delete {
  position: relative;

  &::before {
    content: "";
    position: absolute;
    top: 0;
    left: -75%;
    width: 250%;
    height: 100%;
  }
}