/** 
 * ==============================================
 * Action confirm dialog
 * ==============================================
 */

.component-actionConfirmDialog, .component-actionConfirmDialog .buttonsWrapper {
   
}

.component-actionConfirmDialog.hidden, .component-actionConfirmDialog.withButtonsOnSeparateLine.hidden, .component-actionConfirmDialogReplacedElement.hidden {
   display: none;
}

.component-actionConfirmDialog.withButtonsOnSeparateLine {
   display: block;
}

.component-actionConfirmDialog.withButtonsOnSeparateLine .buttonsWrapper {
   margin-top: 10px;
}




/** 
 * ==============================================
 * Buttons / links
 * ==============================================
 */


form .submitButtonWrapper {
   margin-top: var(--spacing-vertical-normal);
   display: flex;
   align-items: center;
   gap: var(--spacing-horizontal-small);
}

/**
 * Invisible button that can still be used for spinner as actionButton of an ApiCaller
 */

.Polaris-Button.transparent {
   background: rgba(0,0,0,0);
   box-shadow: none;
}


/** 
 * ==============================================
 * Data table
 * ==============================================
 */

/* // ! This has to be placed in the polaris css itself
.Polaris-Pagination.Polaris-Pagination--table button:active,
      .Polaris-Pagination.Polaris-Pagination--table button:focus{
        background-color: none;
      }
*/

.component-dataTable .expandableRowDetail.hidden {
   display: none;
}

.component-dataTable tr.expandable {
   cursor: pointer;
}

.component-dataTable td {
   white-space: normal;
}

/**
 * Style icons to be small enough and have offset from top. Also make right / down icons show when appropriate
 */

.component-dataTable .mainRow .component-icon {
   width: 20px;
   height: 20px;
   padding-top: 5px;
   margin-left: -5px;
   margin-right: 5px;
   filter: invert(27%) sepia(37%) saturate(1010%) hue-rotate(149deg) brightness(100%) contrast(89%); /* blue of the link */
}

.component-dataTable .mainRow .component-icon.chevronDown {
   display: none;
   filter: invert(100%) sepia(0%) saturate(7500%) hue-rotate(166deg) brightness(111%) contrast(100%); /* white */
}

.component-dataTable .mainRow.expanded .chevronRight {
   display: none;
}

.component-dataTable .mainRow.expanded .chevronDown {
   display: inline-block;
}


/**
 * Make expanded and hoverable rows have the same background.
 * In addition, the main row, when expanded, gains bold font
 */

.component-dataTable tr.expandable:hover, .component-dataTable tr.expanded {
   background: var(--p-color-bg-surface-hover);
}

.component-dataTable tr.expandable.expanded > td {
   font-weight: bold;
   background: #333;
   color: #FFF;
}

.component-dataTable tr.expandable.expanded > td a {
   color: #FFF;
}

.component-dataTable .expandableRowDetail > td {
   padding: var(--p-space-300);
}

/**
 * Pagination numbers in a row
 */

.component-dataTable .pageNumbersWrapper {
   padding-left: 10px;
   padding-right: 10px;
}

.component-dataTable .pageNumber {
   padding-left: 5px;
   padding-right: 5px;
}

/**
 * No results label
 */

.component-dataTable #noResultsTextLabel {
   padding-left: var(--p-space-300);
   padding-bottom: 30px;
   border-bottom: var(--p-border-width-050) solid var(--p-color-border);
}

/** 
 * ==============================================
 * Divider
 * ==============================================
 */

.component-divider {
   margin-bottom: var(--spacing-vertical-small);
   border-bottom: var(--p-border-width-025) solid var(--p-color-border);
}


/** 
 * ==============================================
 * Drop-down
 * ==============================================
 */

.component-dropDown .Polaris-Labelled__LabelWrapper {
   margin-bottom: calc(var(--p-space-150) + 1px);
}

.component-dropDown select {
   cursor: pointer;
}


:root {
   --widgetPopupZIndex: 100;
}




/** 
 * ==============================================
 * Image
 * ==============================================
 */

.component-image {
   display: grid;
   align-content: center;
   width:100%;
   justify-content:center;
   position:relative;
}

.component-image.zoomable {
   cursor:zoom-in;
}

.component-icon {
   width: 30px;
   display: inline-block;
}

/** 
 * ==============================================
 * Input file
 * ==============================================
 */

.component-inputFile {
   --buttonWidth: 95px;
}

.component-inputFile .Polaris-LegacyStack {
   margin-right: calc(var(--pc-stack-spacing)*-1);
}

.component-inputFile #filePreview {
   max-width: calc(100% - 95px - var(--p-space-600));
   min-width: 100px;
}

.component-inputFile .component-button, .component-inputFile .component-button button {
   width: var(--buttonWidth);
}

/* disable hover effect on the whole drop zone */
.component-inputFile .Polaris-DropZone--hasOutline:hover {
   cursor: default;
   background-color: var(--p-color-input-bg-surface);
}

.component-inputFile .Polaris-DropZone__Container .Polaris-LegacyStack {
   margin-bottom: calc(var(--pc-stack-spacing)*-1);
   column-gap: var(--p-space-600);
}

.component-inputFile .Polaris-DropZone-FileUpload.withImage {
   justify-content: flex-start;
}

/* Show retake / delete buttons underneath each other */
.component-inputFile .buttonsWrapper {
   display: flex;
   flex-direction: column;
   row-gap: 10px;
}

/* Showing error */
.component-inputFile .fileUploadOuterWrapper.withError {
   background-color: var(--p-color-bg-surface-critical);
}

.Polaris-DropZone--hasOutline.withError::after{
   border-width: var(--p-border-width-025);
   border-color: var(--p-color-border-critical-secondary);
}

/* Square - buttons floating center bottom */
.component-inputFile.square .Polaris-DropZone__Container {
   aspect-ratio: 1;
}

.component-inputFile.square #filePreview {
   max-width: 100%;
}

.component-inputFile.square .buttonsWrapper {
   position: absolute;
   left: calc(0.5*(100% - var(--buttonWidth)));
   bottom: var(--p-space-800);
}

/** 
 * ==============================================
 * Input image
 * ==============================================
 */

/**
 * When has an image and is square, hide the buttons and only show them on hover
 */
.component-inputImage.square.withFile .buttonsWrapper{
   display: none;
}

.component-inputImage.square.withFile:hover .buttonsWrapper {
   display: flex;
}


/** 
 * ==============================================
 * Input image gallery
 * ==============================================
 */

/* 
 * Main gallery grid container
 */
.component-inputImageGallery .galleryGrid {
   --itemAspectRatio: 16/9;
   --num-of-columns: 3;
   --min-image-width: 150px;
   display: grid;
   grid-template-columns: repeat(var(--num-of-columns), minmax(var(--min-image-width), 1fr));
   gap: 16px;
   margin: 12px 0;
}

/* 
 * Individual gallery items
 */
.component-inputImageGallery .galleryItem {
   position: relative;
   border-radius: var(--p-border-radius-200);
   overflow: hidden;
   transition: all 0.2s ease;
   border: 1px solid var(--p-color-border);
   aspect-ratio: var(--itemAspectRatio);
   cursor: grab;
}

.component-inputImageGallery .galleryItem .imageWrapper {
   width: 100%;
   height: 100%;
   display: flex;
   align-items: center;
   justify-content: center;
   overflow: hidden;
}

.component-inputImageGallery .galleryItem .imageWrapper img {
   width: 100%;
   height: 100%;
   object-fit: cover;
   transition: transform 0.2s ease;
}

/* 
 * Drag and drop states of image items
 */
.component-inputImageGallery .galleryItem.dragging {
   opacity: 0.5;
   border: 2px dashed #555;
   cursor: grabbing;
}

.component-inputImageGallery .galleryItem.drag-over {
   border: 2px solid #555;
   cursor: grabbing;
}

/* 
 * Delete button on images
 */
.component-inputImageGallery .galleryItem .deleteButton {
   position: absolute;
   top: 8px;
   right: 8px;
   width: 24px;
   height: 24px;
   background-color: var(--p-surface);
   color: var(--p-text);
   border-radius: 50%;
   display: flex;
   align-items: center;
   justify-content: center;
   cursor: pointer;
   opacity: 0;
   transition: opacity 0.2s ease;
   box-shadow: 0 1px 3px rgba(0, 0, 0, 0.2);
   font-weight: bold;
   font-size: 16px;
   z-index: 2;
}

.component-inputImageGallery .galleryItem:hover .deleteButton {
   opacity: 1;
   background-color: rgba(255,255,255,0.8);
}


/*
 * Empty state
 */
.component-inputImageGallery .galleryGrid .emptyState {
   grid-column: 1 / -1;
   text-align: center;
   padding: 32px;
   color: var(--p-text-subdued);
}

/*
 * Error state
 */

.component-inputImageGallery .galleryGrid.withError {
   background-color: var(--p-color-bg-surface-critical);
}





/** 
 * ==============================================
 * Input text
 * ==============================================
 */


/**
 * Align character counter correctly to bottom of multi-line fields
 */
.component-inputText .Polaris-TextField__CharacterCount {
   align-self: flex-end;
   margin-bottom: var(--p-space-150);
   margin-right: var(--p-space-200);
}

/**
 * Prevent resizing text areas because it looks weird
 */
.component-inputText textarea {
   resize: none;
}

.requiredIndicator {
   color: var(--color-error);
}

/** 
 * ==============================================
 * Input text with color picker
 * ==============================================
 */

.component-inputTextWithColorPicker {
   position: relative;
}

.component-inputTextWithColorPicker .fieldsWrapper {
   display: flex;
   align-items: center;
}

.component-inputTextWithColorPicker .Polaris-TextField:has(> #input)  {
   width: 90px;
   margin-right: 18px;
}

.component-inputTextWithColorPicker .Polaris-TextField:has(> #alphaInput) {
   margin-left: 8px;
   margin-right: 18px;
   width: 55px;
}

.component-inputTextWithColorPicker #colorPickerButton {
   cursor: pointer;
   width: 30px;
   height: 30px;
   border-radius: var(--p-border-radius-200);
   border: var(--p-border-width-0165) solid var(--p-color-input-border)
}

.component-inputTextWithColorPicker .Polaris-ColorPicker__HuePicker {

   background-image:
   linear-gradient( to bottom, red var(--pc-color-picker-dragger-size), yellow, lime, cyan, blue, magenta, red calc(var(--pc-color-picker-size) - var(--pc-color-picker-dragger-size)) );

  background-image: linear-gradient(
    to bottom,
    hsl(0, 100%, 50%),
    hsl(30, 100%, 50%),
    hsl(60, 100%, 50%),  
    hsl(120, 100%, 50%),
    hsl(180, 100%, 50%),
    hsl(240, 100%, 50%),
    hsl(270, 100%, 50%),  
    hsl(300, 100%, 50%),
    hsl(330, 100%, 50%),
    hsl(360, 100%, 50%)
  );

  
}

/**
 * Color picker popup
 */

.component-inputTextWithColorPicker .colorPickerPopup {
   top: 20px;
   left: 0;
   display: block;
   opacity: 1;
}

.component-inputTextWithColorPicker .colorPickerPopup.hidden {
   display: none;
}

.component-inputTextWithColorPicker .Polaris-Popover {
   margin-left: 0;
}

/**
 * Make the hue / alpha sliders have slightly bigger left margin so the popup covers the main inputs
 */
.component-inputTextWithColorPicker .Polaris-ColorPicker__HuePicker, .Polaris-ColorPicker__AlphaPicker {
   margin-left: var(--p-space-300);
}


/** 
 * ==============================================
 * Input text with date / time picker
 * ==============================================
 */

.component-inputTextWithDateTimePicker {
   position: relative;
}

.component-inputTextWithDateTimePicker .fieldsWrapper, .component-inputTextWithDateTimePicker .timeInputsWrapper {
   display: flex;
   align-items: center;
}

.component-inputTextWithDateTimePicker .calendarButton {
   cursor: pointer;
}

.component-inputTextWithDateTimePicker .timeInputsWrapper {
   margin-left: 20px;
}

.component-inputTextWithDateTimePicker .fieldsWrapper .component-dropDown {
   display: flex;
}

.component-inputTextWithDateTimePicker .fieldsWrapper .component-textLabel {
   padding-left: 5px;
   padding-right: 5px;
}

/**
 * Calendar popup
 */

.component-inputTextWithDateTimePicker .calendarPopup {
   top: 20px;
   left: 0;
   display: block;
   opacity: 1;
}

.component-inputTextWithDateTimePicker .calendarPopup.hidden {
   display: none;
}



.component-inputTextWithDateTimePicker .Polaris-Popover {
   margin-left: 0;
}

.calendarPopup .ui-datepicker {
   width: auto;
}

.calendarPopup .ui-widget.ui-widget-content {
   border: 0;
}

/* Make header look like Polaris */
.calendarPopup .ui-datepicker-header {
   background: inherit;
   border: 0px;
   
}

.calendarPopup .ui-datepicker-header select {
   font-weight: bold;
   font-size: var(--p-text-body-sm-font-size);
   letter-spacing: var(--p-text-body-sm-font-letter-spacing);
   line-height: var(--p-text-body-sm-font-line-height);
   color: var(--p-color-text);
   background: var(--p-color-bg-surface-secondary);
   border: 0.0625rem solid var(--p-color-border);
   border-radius: var(--p-border-radius-200);
   padding: var(--p-space-200);
   margin-left: var(--p-space-100);
   margin-right: var(--p-space-100);
}

/* Make arrows on the top look like Polaris */
.calendarPopup .ui-icon-circle-triangle-w, .calendarPopup .ui-icon-circle-triangle-e {
   background-position: 0 0;
   filter: invert(37%) sepia(0%) saturate(95%) hue-rotate(189deg) brightness(93%) contrast(79%);
   cursor: pointer;
}

.calendarPopup .ui-icon-circle-triangle-w {
   background-image: url("images/ArrowLeftIcon.svg");
}

.calendarPopup .ui-icon-circle-triangle-e {
   background-image: url("images/ArrowRightIcon.svg");
}

.calendarPopup .ui-state-hover, .calendarPopup .ui-state-default {
   border: 0;
   background: inherit;
}

.calendarPopup .ui-datepicker-prev, .calendarPopup .ui-datepicker-prev-hover {
   left: 2px;
   top: var(--p-space-200);
}

.calendarPopup .ui-datepicker-next, .calendarPopup .ui-datepicker-next-hover {
   right: 2px;
   top: var(--p-space-200);
}

/* Make day names look like Polaris */
.calendarPopup .ui-datepicker th {
   padding: var(--p-space-200);
   font-weight: var(--p-font-weight-regular);
   font-size: var(--p-text-body-sm-font-size);
   letter-spacing: var(--p-text-body-sm-font-letter-spacing);
   line-height: var(--p-text-body-sm-font-line-height);
   color: var(--p-color-text-secondary);
}

/* Make day buttons look like Polaris */
.calendarPopup .ui-datepicker-calendar .ui-state-default {
   width: 40px;
   text-align: center;
   color: var(--p-color-text);
   display: block;
   height: 100%;
   margin: 0;
   padding: var(--p-space-100) var(--p-space-200) var(--p-space-100) var(--p-space-200) ;
   background: transparent;
   border: none;
   border-radius: var(--p-border-radius-200);
   outline: none;
   color: var(--p-color-text);
   cursor: pointer;
}

.calendarPopup .ui-datepicker-calendar .ui-state-hover, .calendarPopup .ui-datepicker-calendar .ui-state-highlight.ui-state-active, .calendarPopup .ui-datepicker-calendar .ui-state-active {
   background: var(--p-color-bg-fill-brand-selected);
   color: var(--p-color-text-brand-on-bg-fill);
}

.calendarPopup .ui-datepicker-calendar .ui-state-highlight { /* current date */
   background: #666;
   color: var(--p-color-text-brand-on-bg-fill);
}

/** 
 * ==============================================
 * Popover
 * ==============================================
 */

.popoverContent {
   --pc-box-padding-block-start-xs: var(--p-space-300);
   --pc-box-padding-block-end-xs: var(--p-space-300);
   --pc-box-padding-inline-start-xs: var(--p-space-300);
   --pc-box-padding-inline-end-xs: var(--p-space-300);
}


/** 
 * ==============================================
 * Spinner
 * ==============================================
 */

.component-spinner {
   width: 100%;
   display: flex;
   align-items: center;
   justify-content: center;
   filter: invert(39%) sepia(0%) saturate(0%) hue-rotate(217deg) brightness(100%) contrast(91%);
}




/** 
 * ==============================================
 * Tabs
 * ==============================================
 */

.Polaris-Tabs__ButtonWrapper {
   padding-bottom: var(--spacing-vertical-small);
}



/** 
 * ==============================================
 * Text label
 * ==============================================
 */

.component-textLabel.withIcon > div {
   display: flex;
   align-items: flex-start;
}

.component-textLabel .component-textLabel { /* make hierarchy of labels and icon look all in one line */
   display: flex;
}

.component-textLabel .component-textLabel.withIcon {
   margin-left: 0.2em;
}

.component-textLabel.withIcon .component-icon {
   margin-top: -0.2em;
}


li {
   font-size: var(--p-text-body-lg-font-size);
}