@use 'sass:color';
@use '../variables.scss' as *;

/**
 * Move Popup - Details
 */

@layer base {
  .item-details {
    // tie icon size to item tile size, default value still the same
    --set-bonus-icon-size: calc(var(--item-size) * 0.4);
    margin: 10px;
    box-sizing: border-box;

    &.warning {
      background: color.scale($red, $lightness: -90%);
      border-top: 4px solid $red;
      padding: 8px;
      white-space: normal;
      max-width: fit-content;
      a {
        color: var(--theme-text);
        font-size: 12px;
      }
    }
  }

  .masterwork-progress {
    margin: 4px 0;
    padding: 4px 10px 4px;
    background: var(--theme-item-popup-panel-bg);

    span {
      color: var(--theme-accent-primary);
      font-weight: bold;
    }

    img {
      width: 16px;
      height: 16px;
      margin-bottom: -4px;
    }
  }

  .crafted-progress {
    --objective-progress-color: #{$deepsight-border-color};
    --objective-background-color: var(--theme-item-popup-progress-bar-bg);
    padding: 4px 10px 4px;
    background: var(--theme-item-popup-panel-bg);
    gap: 4px;

    display: flex;
    align-items: center;
  }
}
