/*!
Copyright 2023 Adobe. All rights reserved.
This file is licensed to you under the Apache License, Version 2.0 (the "License");
you may not use this file except in compliance with the License. You may obtain a copy
of the License at http://www.apache.org/licenses/LICENSE-2.0

Unless required by applicable law or agreed to in writing, software distributed under
the License is distributed on an "AS IS" BASIS, WITHOUT WARRANTIES OR REPRESENTATIONS
OF ANY KIND, either express or implied. See the License for the specific language
governing permissions and limitations under the License.
*/

.spectrum-Swatch{
  --spectrum-swatch-focus-indicator-border-radius:8px;
  --spectrum-swatch-icon-border-color:rgba(0, 0, 0, 0.51);
  --spectrum-swatch-size:var(--spectrum-swatch-size-small);
  --spectrum-swatch-border-radius:var(--spectrum-corner-radius-100);
  --spectrum-swatch-border-thickness:var(--spectrum-border-width-100);
  --spectrum-swatch-border-thickness-selected:var(--spectrum-border-width-200);
  --spectrum-swatch-disabled-icon-size:var(--spectrum-workflow-icon-size-75);
  --spectrum-swatch-slash-thickness:var(--spectrum-swatch-slash-thickness-small);
  --spectrum-swatch-focus-indicator-thickness:var(--spectrum-focus-indicator-thickness);
  --spectrum-swatch-focus-indicator-gap:var(--spectrum-focus-indicator-gap);
  --spectrum-swatch-border-color-selected:var(--spectrum-gray-900);
  --spectrum-swatch-inner-border-color-selected:var(--spectrum-gray-50);
  --spectrum-swatch-disabled-icon-border-color:var(--spectrum-swatch-disabled-icon-border-color);
  --spectrum-swatch-disabled-icon-color:var(--spectrum-white);
  --spectrum-swatch-dash-icon-color:var(--spectrum-gray-800);
  --spectrum-swatch-slash-icon-color:var(--spectrum-red-900);
  --spectrum-swatch-focus-indicator-color:var(--spectrum-focus-indicator-color);
}

.spectrum-Swatch--sizeXS{
  --spectrum-swatch-size:var(--spectrum-swatch-size-extra-small);
  --spectrum-swatch-disabled-icon-size:var(--spectrum-workflow-icon-size-50);
  --spectrum-swatch-slash-thickness:var(--spectrum-swatch-slash-thickness-extra-small);
}

.spectrum-Swatch--sizeS{
  --spectrum-swatch-size:var(--spectrum-swatch-size-small);
  --spectrum-swatch-disabled-icon-size:var(--spectrum-workflow-icon-size-75);
  --spectrum-swatch-slash-thickness:var(--spectrum-swatch-slash-thickness-small);
}

.spectrum-Swatch--sizeM{
  --spectrum-swatch-size:var(--spectrum-swatch-size-medium);
  --spectrum-swatch-disabled-icon-size:var(--spectrum-workflow-icon-size-100);
  --spectrum-swatch-slash-thickness:var(--spectrum-swatch-slash-thickness-medium);
}

.spectrum-Swatch--sizeL{
  --spectrum-swatch-size:var(--spectrum-swatch-size-large);
  --spectrum-swatch-disabled-icon-size:var(--spectrum-workflow-icon-size-200);
  --spectrum-swatch-slash-thickness:var(--spectrum-swatch-slash-thickness-large);
}

.spectrum--light{
  --spectrum-swatch-border-color:rgba(0, 0, 0, 0.51);
}

.spectrum--dark, .spectrum--darkest{
  --spectrum-swatch-border-color:rgba(255, 255, 255, 0.51);
}

@media (forced-colors: active){
  .spectrum-Swatch{
    --highcontrast-swatch-disabled-icon-color:GrayText;
    --highcontrast-swatch-focus-indicator-color:ButtonText;
    --highcontrast-swatch-background-color-selected:Background;
    --highcontrast-swatch-border-color-selected:Highlight;
    --highcontrast-swatch-border-color:ButtonText;
    --highcontrast-swatch-fill-foreground-color:ButtonText;
  }

    .spectrum-Swatch .spectrum-Swatch-fill{
      forced-color-adjust:none;
    }

  .spectrum-Swatch[disabled], .spectrum-Swatch.is-disabled{
    --highcontrast-swatch-border-color:GrayText;
  }
}

.spectrum-Swatch{
	inline-size:var(--mod-swatch-size, var(--spectrum-swatch-size));
	block-size:var(--mod-swatch-size, var(--spectrum-swatch-size));

  display:flex;
  align-items:center;
  justify-content:center;
  position:relative;

  outline:none;
  -webkit-user-select:none;
          user-select:none;
}

.spectrum-Swatch .spectrum-Swatch-disabledIcon{
		inline-size:var(
			--mod-swatch-disabled-icon-size,
			var(--spectrum-swatch-disabled-icon-size)
		);
		block-size:var(
			--mod-swatch-disabled-icon-size,
			var(--spectrum-swatch-disabled-icon-size)
		);
	}

.spectrum-Swatch, .spectrum-Swatch::before{
		border-radius:var(
			--mod-swatch-border-radius,
			var(--spectrum-swatch-border-radius)
		);
	}

.spectrum-Swatch.is-selected{
    background-color:var(--highcontrast-swatch-background-color-selected, var(--mod-swatch-inner-border-color-selected, var(--spectrum-swatch-inner-border-color-selected)));
	}

.spectrum-Swatch.is-selected .spectrum-Swatch-fill{
      clip-path:polygon(
        calc(var(--mod-swatch-border-thickness-selected, var(--spectrum-swatch-border-thickness-selected)) * 2)
        calc(var(--mod-swatch-border-thickness-selected, var(--spectrum-swatch-border-thickness-selected)) * 2),
        calc(100% - var(--mod-swatch-border-thickness-selected, var(--spectrum-swatch-border-thickness-selected)) * 2)
        calc(var(--mod-swatch-border-thickness-selected, var(--spectrum-swatch-border-thickness-selected)) * 2),
        calc(100% - var(--mod-swatch-border-thickness-selected, var(--spectrum-swatch-border-thickness-selected)) * 2)
        calc(100% - var(--mod-swatch-border-thickness-selected, var(--spectrum-swatch-border-thickness-selected)) * 2),
        calc(var(--mod-swatch-border-thickness-selected, var(--spectrum-swatch-border-thickness-selected)) * 2)
        calc(100% - var(--mod-swatch-border-thickness-selected, var(--spectrum-swatch-border-thickness-selected)) * 2));
      border-radius:0;
		}

.spectrum-Swatch.is-selected .spectrum-Swatch-fill::before{
				border-radius:0;
				box-shadow:none;
			}

.spectrum-Swatch.is-selected::before{
			opacity:1;
		}

.spectrum-Swatch.is-image .spectrum-Swatch-fill::before{
        background-color:transparent;
      }

.spectrum-Swatch.is-mixedValue .spectrum-Swatch-fill{
      background:var(--spectrum-picked-color, transparent);
    }

.spectrum-Swatch.is-mixedValue .spectrum-Swatch-mixedValueIcon{
      color:var(--spectrum-swatch-dash-icon-color);
      display:block;
    }

.spectrum-Swatch.is-nothing .spectrum-Swatch-fill{
      background-color:var(--spectrum-picked-color, transparent);
      background-image:none;
		}

.spectrum-Swatch.is-nothing .spectrum-Swatch-fill::after{
				inline-size:var(
					--mod-swatch-slash-thickness,
					var(--spectrum-swatch-slash-thickness)
				);
				content:"";
				position:absolute;
				transform:rotate(-45deg);
				block-size:200%;
				background:var(
					--highcontrast-swatch-fill-foreground-color,
					var(
						--mod-swatch-slash-icon-color,
						var(--spectrum-swatch-slash-icon-color)
					)
				);
			}

.spectrum-Swatch.is-nothing.spectrum-Swatch--rectangle .spectrum-Swatch-fill::after{
					transform:rotate(-25deg);
				}

.spectrum-Swatch[disabled] .spectrum-Swatch-disabledIcon, .spectrum-Swatch.is-disabled .spectrum-Swatch-disabledIcon{
      display:block;
    }

.spectrum-Swatch::before{
		content:"";
		position:absolute;
		inset:0;

    border-width:var(--mod-swatch-border-thickness-selected, var(--spectrum-swatch-border-thickness-selected));
    border-style:solid;
    border-color:var(--highcontrast-swatch-border-color-selected, var(--mod-swatch-border-color-selected, var(--spectrum-swatch-border-color-selected)));

    opacity:0;

    pointer-events:none;
  }

.spectrum-Swatch::after{
		content:"";
		position:absolute;
		inset:calc(
			-2 * var(--mod-swatch-focus-indicator-gap, var(--spectrum-swatch-focus-indicator-gap))
		);

    opacity:0;

    border-width:var(--mod-swatch-focus-indicator-thickness, var(--spectrum-swatch-focus-indicator-thickness));
    border-style:solid;
    border-color:var(--highcontrast-swatch-focus-indicator-color, var(--mod-swatch-focus-indicator-color, var(--spectrum-swatch-focus-indicator-color)));
    border-radius:var(--mod-swatch-focus-indicator-border-radius, var(--spectrum-swatch-focus-indicator-border-radius));

    transition:opacity var(--mod-animation-duration-100, var(--spectrum-animation-duration-100)) ease-in-out;
  }

.spectrum-Swatch:focus-visible::after,
.spectrum-Swatch.is-focus-visible::after{
			opacity:1;
		}

.spectrum-Swatch-fill{
  display:flex;
  align-items:center;
  justify-content:center;

	inline-size:100%;
	block-size:100%;
	box-sizing:border-box;

  position:relative;

  overflow:hidden;

  border-radius:var(--mod-swatch-border-radius, var(--spectrum-swatch-border-radius));
}

.spectrum-Swatch-fill::before{
		content:"";
		position:absolute;
		inset:0;
		z-index:0;
    background-color:var(--spectrum-picked-color, transparent);
    box-shadow:inset 0 0 0 var(--mod-swatch-border-thickness, var(--spectrum-swatch-border-thickness)) var(--highcontrast-swatch-border-color, var(--mod-swatch-border-color, var(--spectrum-swatch-border-color)));
    border-radius:var(--mod-swatch-border-radius, var(--spectrum-swatch-border-radius));
  }

.spectrum-Swatch--noBorder .spectrum-Swatch-fill::before{
			box-shadow:none;
			background-color:var(--spectrum-picked-color, transparent);
		}

.spectrum-Swatch-mixedValueIcon{
  display:none;
  pointer-events:none;
  color:var(--spectrum-picked-color, transparent);
}

.spectrum-Swatch-disabledIcon{
  position:relative;
  z-index:2;

  display:none;
  pointer-events:none;

  color:var(--highcontrast-swatch-disabled-icon-color, var(--mod-swatch-disabled-icon-color, var(--spectrum-swatch-disabled-icon-color)));
  stroke:var(--highcontrast-swatch-disabled-icon-color, var(--mod-swatch-disabled-icon-color, var(--spectrum-swatch-disabled-icon-color)));
}

.spectrum-Swatch-disabledIcon path:first-child{
    fill:var(--highcontrast-swatch-disabled-icon-color, var(--mod-swatch-disabled-icon-color, var(--spectrum-swatch-disabled-icon-color)));
  }

.spectrum-Swatch-disabledIcon path:last-child{
    fill:var(--mod-swatch-icon-border-color, var(--spectrum-swatch-icon-border-color));
  }

.spectrum-Swatch--rectangle{
	inline-size:calc(var(--mod-swatch-size, var(--spectrum-swatch-size)) * 2);
}

.spectrum-Swatch--roundingNone, .spectrum-Swatch--roundingNone::before, .spectrum-Swatch--roundingNone::after, .spectrum-Swatch--roundingNone .spectrum-Swatch-fill, .spectrum-Swatch--roundingNone .spectrum-Swatch-fill::before, .spectrum-Swatch--roundingNone.is-selected .spectrum-Swatch-fill, .spectrum-Swatch--roundingNone.is-selected .spectrum-Swatch-fill::before{
		border-radius:0;
	}

.spectrum-Swatch--roundingFull:not(.spectrum-Swatch--rectangle), .spectrum-Swatch--roundingFull:not(.spectrum-Swatch--rectangle)::before, .spectrum-Swatch--roundingFull:not(.spectrum-Swatch--rectangle)::after, .spectrum-Swatch--roundingFull:not(.spectrum-Swatch--rectangle) .spectrum-Swatch-fill, .spectrum-Swatch--roundingFull:not(.spectrum-Swatch--rectangle) .spectrum-Swatch-fill::before, .spectrum-Swatch--roundingFull.is-selected:not(.spectrum-Swatch--rectangle) .spectrum-Swatch-fill, .spectrum-Swatch--roundingFull.is-selected:not(.spectrum-Swatch--rectangle) .spectrum-Swatch-fill::before{
			border-radius:100%;
		}

.spectrum-Swatch--roundingFull.is-selected:not(.spectrum-Swatch--rectangle) .spectrum-Swatch-fill{
      clip-path:circle(calc(50% - (var(--mod-swatch-border-thickness-selected, var(--spectrum-swatch-border-thickness-selected)) * 2)) at 50% 50%);
    }

.spectrum-Swatch-image{
  object-fit:contain;

	inline-size:100%;
	block-size:100%;

  transition:width var(--mod-animation-duration-100, var(--spectrum-animation-duration-100)) ease-in-out, height var(--mod-animation-duration-100, var(--spectrum-animation-duration-100)) ease-in-out;
}
