@import (reference) url('./Dropdown.less');
@import (reference) url('../v4/Icon.less');
@import (reference) url('../v4/IconButton.less');

.Widget {
  --Widget-padding: var(--gap-l);

  background: var(--color-white);
  padding: var(--Widget-padding);
  position: relative;
}

.Widget
  :is(
    .widget-urls.is-readOnly,
    .widget-urlsRepeatable.is-readOnly,
    .ContentEditSites-owner.is-readOnly,
    .ContentEditSites-access.is-readOnly,

  ) {
  opacity: 0.7;
  pointer-events: none;
  user-select: none;
}

.Widget .is-readOnly .UrlsWidget-itemLabel a,
.widget .is-readOnly .RCIG-title::after,
.widget .is-readOnly .ContentSummary-info,
.widget .is-readOnly .ContentSelector-edit {
  cursor: pointer;
  pointer-events: auto;
}

.Widget-title {
  .Text.is-m;

  background: var(--color-gray2);
  font-weight: bold;
  margin: 0;
  overflow: hidden;
  padding: var(--gap-m) var(--gap-l);
  position: sticky;
  text-overflow: ellipsis;
  top: 0;
  white-space: nowrap;
  z-index: 10;
}

.Widget-heading {
  .Text.is-s;

  font-weight: bold;
  margin: var(--gap-l) 0;
}

.Widget-controls {
  align-items: center;
  display: flex;
  height: calc(var(--gap-m) * 2 + var(--Text-height));
  position: absolute;
  right: var(--gap-l);
  top: 0;
  z-index: 11;

  > *:not(:first-child) {
    margin-left: var(--gap-l);
  }

  &.is-locked {
    display: none !important;
  }
}

.Widget-actions {
  margin-left: var(--gap-l);
}

.Widget-restoreButton {
  .Button;
  .Text.is-m;

  background: transparent;
}

.Widget-actionsToggle {
  .Link;
  .IconButton;

  --IconButton-name: 'settings';

  margin: 0 calc(0px - var(--gap-s));
}

.Widget-actionsList {
  .Dropdown;

  z-index: 10000;

  [role='menuitem'] {
    .Dropdown-item;
  }
}

.Widget-actions.is-open {
  .Widget-actionsToggle {
    --IconButton-name: 'close';

    background: var(--color-black);
    border-radius: 50%;
    color: var(--color-white);
  }

  .Widget-actionsList {
    .Dropdown.is-open;
  }
}

// Things that should be full bleed when directly inside Widget.
.Widget,
.Widget > form,
.Widget > form > .fixedScrollable {
  > .Widget-title,
  > .TabBar,
  > .Message,
  > * > .Message {
    margin: calc(0px - var(--Widget-padding));
    margin-bottom: var(--Widget-padding);
  }

  > .Message:last-child {
    margin-bottom: calc(0px - var(--Widget-padding));
  }

  > .TC,
  > .CIG {
    margin: calc(0px - var(--Widget-padding));
    margin-bottom: 0;
  }

  > .ActionBar {
    margin: 0 calc(0px - var(--Widget-padding))
      calc(0px - var(--Widget-padding));
    padding: var(--Widget-padding);
  }

  > .inputContainer ~ .ActionBar {
    margin-top: var(--gap-xl);
  }

  // CIG rows which exist outside of TC and CIG containers
  // use margin instead of padding so that the Widget title's margin will collapse into it.
  > .CIG-row {
    margin-top: var(--gap-xl);
    padding-top: 0;
  }
}

.Widget-filters {
  background-color: var(--color-gray3);
  margin-left: calc(var(--Widget-padding) * -1);
  margin-right: calc(var(--Widget-padding) * -1);
  margin-top: calc(var(--Widget-padding) * -1);
  min-height: calc(var(--gap-l) * 2);
  padding: 0 var(--Widget-padding);
}

.Widget-filters,
.Widget-filter {
  align-items: center;
  display: flex;
  justify-content: space-between;
}

.Widget-filter {
  width: 100%;
}

btu-widget {
  display: block;

  .Widget-title {
    cursor: pointer;

    .Widget-collapse {
      .IconButton;

      --IconButton-name: 'keyboard_arrow_up' !important;

      margin: 0 calc(0px - var(--gap-s));
      transition: transform var(--time-xs);
    }
  }

  &.is-error > .Widget-title {
    color: var(--color-red6);

    .Widget-expand {
      &::after {
        .Icon;

        content: 'error';
        margin-left: var(--gap-s);
      }
    }
  }

  &.is-collapsed {
    height: calc(var(--gap-m) * 2 + var(--lineHeight-m));
    overflow: hidden;

    .Widget-title {
      position: static;
    }

    .Widget-collapse {
      transform: rotate(180deg);
    }

    > div,
    > table {
      display: none;
    }
  }
}
