.graphic-account {
  vector-effect: non-scaling-stroke;
  overflow: visible;
  position: relative;

  &__bg {
    fill: var(--theme-elevation-50);
    stroke: var(--theme-elevation-200);
    stroke-width: 1px;
  }

  &__head,
  &__body {
    fill: var(--theme-elevation-200);
  }

  &--active {
    .graphic-account {
      &__bg {
        fill: var(--theme-elevation-500);
        stroke: var(--theme-text);
      }

      &__head,
      &__body {
        fill: var(--theme-text);
      }
    }
  }

  &:hover:not(.graphic-account--active) {
    .graphic-account {
      &__bg {
        fill: var(--theme-elevation-200);
        stroke: var(--theme-elevation-600);
      }

      &__head,
      &__body {
        fill: var(--theme-elevation-600);
      }
    }
  }
}

[data-theme='light'] {
  .graphic-account {
    &--active {
      .graphic-account {
        &__bg {
          fill: var(--theme-elevation-300);
          stroke: var(--theme-elevation-600);
        }

        &__head,
        &__body {
          fill: var(--theme-elevation-600);
        }
      }
    }
  }
}