@charset "UTF-8";
@import '@craftcms/sass/mixins';

/* widgets */
.widget {
  position: relative;
  perspective: 1000px;
  transition:
    opacity linear 200ms,
    transform linear 200ms;

  &.scaleout {
    opacity: 0;
    transform: scale(0.5);
  }

  & > .front,
  & > .back {
    backface-visibility: hidden;
    transition: 600ms;
  }

  &:not(.flipped) {
    & > .front {
      transform: rotateY(0deg);

      & > .pane > .icon.settings:hover {
        opacity: 1 !important;
      }
    }

    & > .back {
      transform: rotateY(-180deg);
    }

    &:hover > .front > .pane > .icon.settings {
      opacity: 0.8;
    }

    & .front > .pane > .icon.settings:focus {
      opacity: 0.8;
    }
  }

  &.flipped {
    & > .front {
      transform: rotateY(180deg);
    }

    & > .back {
      transform: rotateY(0deg);
    }
  }

  &:not(.flipped) > .back,
  &.flipped > .front {
    opacity: 0;
  }

  & > .front {
    & > .pane {
      & > .icon.settings {
        display: flex;
        justify-content: center;
        align-items: center;
        opacity: 0;
        cursor: pointer;
        @include right(12px);
        inset-block-start: 12px;
        transition: opacity linear 200ms;
        position: absolute;
        height: var(--touch-target-size);
        width: var(--touch-target-size);
        border-radius: var(--button-border-radius);
      }

      & > .spinner.body-loading {
        display: none;
      }
    }
  }

  & > .back {
    position: absolute;
    inset-block-start: 0;
    inset-inline-start: 0;
    width: 100%;

    & > .pane {
      background: var(--gray-050);

      & > .errors {
        margin-block-start: 24px;
      }
    }
  }

  &.loading {
    & > .front {
      & > .pane {
        & > .spinner.body-loading {
          display: block;
          float: inline-end;
          margin-inline-start: 10px;
        }
      }
    }
  }

  &.loading-new.new {
    & > .front {
      & > .pane {
        height: 252px;

        & > .spinner.body-loading {
          display: block;
          position: absolute;
          inset-block-start: calc(50% - 15px);
          inset-inline-start: calc(50% - 12px);
        }
      }
    }
  }

  .widget-heading {
    margin-block-end: 15px;

    h2 {
      margin-block-end: 3px;
    }

    h5 {
      margin-block-start: 0;
    }
  }

  form + .errors {
    margin-block-start: 15px;
  }
}

/* widget lists */
body ol.widget__list {
  list-style-type: none;
  margin: 0;
  padding: 0;
}

.widget__list-item {
  padding-block: 7px;
  padding-inline: 0;

  .craft\\widgets\\mydrafts & {
    padding: 0;
  }
}

/* Recent Entries widget */
.craft\\widgets\\recententries .body .table {
  table-layout: fixed;
}

/* New Users Widget */
.craft\\widgets\\newusers .chart {
  height: 200px;
  margin: 0;
}

.newwidgetmenu ul li a .icon svg,
.widgetmanagerhud-icon svg {
  width: 1rem;
  height: 1rem;
  @include svg-mask(var(--ui-control-color));
}

/* New Widget Menu */
.widgetmanagerhud {
  max-width: 400px;

  .body {
    min-width: 400px;
  }
}

@media only screen and (width <= 673px) {
  .widgetmanagerhud {
    max-width: 300px;

    .body {
      min-width: 300px;

      .widgetmanagerhud-col-colspan-picker {
        display: none;
      }

      .widgetmanagerhud-col-move {
        display: none;
      }
    }
  }
}
