@use '@uppy/core/src/_variables.scss' as *;
@use '@uppy/core/src/_utils.scss' as *;

// On both mobile and .md+ screens
.uppy-Dashboard-Item-action {
  @include blue-border-focus;

  color: $gray-500;
  cursor: pointer;

  &:hover {
    color: $gray-900;
    opacity: 1;
  }

  [data-uppy-theme='dark'] & {
    @include blue-border-focus--dark;

    color: $gray-300;
  }

  [data-uppy-theme='dark'] &:hover {
    color: $gray-200;
  }
}

.uppy-Dashboard-Item-action--remove {
  color: $gray-900;
  opacity: 0.95;

  &:hover {
    color: $black;
    opacity: 1;
  }

  .uppy-size--md & {
    position: absolute;
    top: -8px;
    inset-inline-end: -8px;
    z-index: $zIndex-3;
    width: 18px;
    height: 18px;
    padding: 0;

    &:focus {
      border-radius: 50%;
    }
  }

  .uppy-Dashboard--singleFile.uppy-size--height-md & {
    position: absolute;
    inset-inline-end: 8px;
    top: 8px;
  }

  [data-uppy-theme='dark'] & {
    color: $gray-700;
  }

  [data-uppy-theme='dark'] &:hover {
    color: $gray-800;
  }
}

// Only for mobile screens
.uppy-Dashboard:not(.uppy-size--md):not(
    .uppy-Dashboard--singleFile.uppy-size--height-md
  ) {
  // Vertically center Edit&Remove buttons on mobile
  .uppy-Dashboard-Item-actionWrapper {
    display: flex;
    align-items: center;
  }
  // Same inline design for Edit, Remove, and CopyLink buttons
  .uppy-Dashboard-Item-action {
    width: 22px;
    height: 22px;
    margin-left: 3px;
    padding: 3px;

    &:focus {
      border-radius: 3px;
    }
  }
}
// Only for screens bigger than .md
.uppy-size--md {
  // Edit and CopyLink buttons are inline
  .uppy-Dashboard-Item-action--copyLink,
  .uppy-Dashboard-Item-action--edit {
    width: 16px;
    height: 16px;
    padding: 0;

    &:focus {
      border-radius: 3px;
    }
  }
}