/** 
 * ==============================================
 * 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;
}


/** 
 * ==============================================
 * File / image input
 * ==============================================
 */

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

.component-inputFile .component-button, .component-inputFile .component-button button {
   width: 90px;
}

/* 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;
}



/** 
 * ==============================================
 * 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 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: 85px;
   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);
}