@use "../atoms/colours" as colour;

.application.sheet.dsa41.actor.group {

  .sheet-header {

    display: grid;
    grid-template-columns: 32px 1fr;
    gap: 8px;

    img {
      height: 32px;
      width: 32px;
    }
  }

  .characters-overview {

    display: inline-flex;
    overflow-x: auto;
    height: 100%;
    width: 100%;
    gap: 8px;

    &.minimal {
      display: unset !important;

      .character {
        display: inline-block;
        margin: 4px;
        box-shadow: 2px 2px 4px rgba(0, 0, 0, 0.5);
      }
    }

    .rollable {
      @include colour.highlight;
    }

    .character {

      width: 192px;
      position: relative;

      .header {

        position: relative;
        height: 80px;
        overflow: hidden;
        left: 0;
        right: 0;

        img {
          position: absolute;
          top: 0;
          height: 80px;
          width: 100%;
          left: 0;
          right: 0;

          &::before {

          }
        }

        span.name {
          position: absolute;
          bottom: 0;
          left: 0;
          right: 0;
          text-align: center;
          background-color: rgba(0, 0, 0, 0.5);
          color: white;
        }

      }

      .mini-attributes {

        display: grid;
        height: 24px;
        grid-template-columns: repeat(8, 1fr);

        .mini-attribute {

          border-left: 1px solid black;
          position: relative;
          width: 24px;

          &:first-of-type {
            border-left: 0;
          }

          .value {
            position: absolute;
            top: 0;
            left: 0;
            right: 0;
            bottom: 0;
            line-height: 100%;
            vertical-align: middle;
            text-align: center;
            display: block;
          }

          .name {
            position: absolute;
            bottom: 0;
            left: 0;
            right: 0;
            height: 14px;
            text-align: center;
            display: block;
          }

        }

      }

      .fixedElements {
        position: absolute;
        overflow: scroll;
        top: 102px;
        bottom: 20px;
        left: 0;
        right: 0;

        .inline-list {
          list-style: none;
          padding: 0;
          display: block;

          .mini-skill, .mini-advantage {
            display: inline-block;
            padding: 0 4px;

            @include colour.highlight;
          }
        }
      }

      .owneroptions {
        position: absolute;
        bottom: 0;
        left: 0;
        right: 0;
        height: 36px;
      }

    }

  }

  .equipment {

    display: grid;
    height: 32px;
    grid-template-columns: 32px 24px 1fr 80px;
    grid-template-rows: 1fr;

    input {
      appearance: base;
    }

    span {
      line-height: 32px;
      vertical-align: middle;
    }

    &:hover {
      .item-name {
        @include colour.highlight;
      }
    }
  }

}