body.agility-live-preview {
  /*
	scroll bar overrides
	*/

  scrollbar-width: thin;
  scrollbar-color: "aaa";

  &::-webkit-scrollbar {
    width: 10px; /* width of the entire scrollbar */
    height: 10px;
  }

  &::-webkit-scrollbar-track {
    background: #dddddd00; /* color of the tracking area */
    border-radius: 20px;
  }

  &::-webkit-scrollbar-track:hover {
    background: #dddddd55; /* color of the tracking area */
  }

  &::-webkit-scrollbar {
  }

  &::-webkit-scrollbar-thumb {
    border-radius: 20px; /* roundness of the scroll thumb */
    background: #aaaaaaaa;
  }

  &::-webkit-scrollbar-thumb:hover {
    background: #aaaaaa99;
  }

  .agility-component {
    position: relative;
    transition: all 0.2s ease-in-out;
    border: 1px dashed #9ca3af;

    &:hover,
    &:has(.agility-component-edit:focus) {
      border: 1px solid #691ad8;
      .agility-component-edit {
        background: #9ca3afff;
        opacity: 1;
      }

      .agility-field {
        border: 0.5px dashed #9ca3af;
      }
    }

    .agility-component-edit {
      transition: all 0.2s ease-in-out;
      position: absolute;
      color: white;
      top: 0px;
      right: 0px;
      text-align: center;
      opacity: 0;

      img {
        margin: 0;
      }
    }

    .agility-field {
      position: relative;
      transition: all 0.2s ease-in-out;
      border: 1px solid #691ad800;
      &:hover,
      &:has(.agility-field-edit:focus) {
        border: 1px solid #691ad8ff;
        .agility-field-edit {
          background: #9ca3afff;
          opacity: 1;
        }
      }

      .agility-field-edit {
        transition: all 0.2s ease-in-out;
        position: absolute;
        // background: #9ca3afaa;
        // border-radius: 0 0 0 4px;
        color: white;
        // padding: 5px 10px;
        top: 0px;
        right: 0px;
        // height: 30px;
        // width: 40px;
        text-align: center;
        opacity: 0;
        // &:hover {
        //   background: #691ad8;
        // }
        img {
          margin: 0;
        }
      }
    }
  }
}