/* TYPOGRAPHY */
.skeleton__text-body {
  display: flex;
  flex-direction: column;

  [class^="skeleton__text"] {
    &:not(:first-child):last-child {
      width: 60%;
    }
  }
}

.skeleton__icon, .skeleton__text--h2, .skeleton__text--h4, .skeleton__text--h5, .skeleton__text--h6, .skeleton__text--p, .skeleton__text--p-caption {
  background-color: var(--light-gray);

  &.skeleton__text--light {
    background-color: var(--lightest-gray);
  }
}

[class^="skeleton__text"] {
  border-radius: var(--border-radius);
  width: 100%;

  &.skeleton--xs {
    width: 40px;
  }

  &.skeleton--s {
    width: 100px;
  }

  &.skeleton--m {
    width: 200px;
  }
}

.skeleton__text--h1 {
  height: 2.5rem;
  margin: calc(0.25rem / 2) 0;
}

.skeleton__text--h2 {
  height: 2rem;
  margin: calc(0.25rem / 2) 0;
}

.skeleton__text--h4 {
  height: 1.25rem;
  margin: calc(0.25rem / 2) 0;
}

.skeleton__text--h5 {
  height: 1rem;
  margin: calc(0.5rem / 2) 0;
}

.skeleton__text--p, .skeleton__text--h6 {
  height: 1rem;
  margin: calc(0.25rem / 2) 0;
}

.skeleton__text--p-caption {
  height: 0.875rem;
  margin: calc(0.125rem / 2) 0;
}

h2.skeleton__text--h2, h5.skeleton__text--h5 {
  color: transparent !important;
  width: fit-content !important;
}

.skeleton__shine {
  animation: loadingShine 2s infinite;
  background-color: var(--light-gray) !important;
  background-image: linear-gradient(90deg, var(--light-gray), var(--off-white) 50%, var(--light-gray) 100%) !important;
  background-repeat: no-repeat !important;
  background-size: 40% 100% !important;
}

/* ICON */
.skeleton__icon {
  border-radius: 0.25rem;
  height: 1rem;
  width: 1rem;
}

/* BTN */
.skeleton__btn {
  border-radius: var(--border-radius);
  display: inline-flex;
  height: 2rem;
  justify-content: center;
  min-width: 140px;
  position: relative;

  &.skeleton__btn--primary {
    background-color: var(--light-gray);
  }

  &.skeleton__btn--secondary {
    border: 1px solid var(--light-gray);
  }

  &.skeleton__btn--secondary::after, &.skeleton__btn--tertiary::after {
    background-color: var(--light-gray);
    border-radius: var(--border-radius);
    content: "";
    display: block;
    height: 1rem;
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    width: calc(100% - 1rem);
  }

  &.skeleton__btn-icon {
    min-width: 2rem;

    &.skeleton__btn--secondary::after, &.skeleton__btn--tertiary::after {
      border-radius: 0.25rem;
      width: 1rem;
    }
  }

  &.skeleton__btn-sm {
    height: 1.5rem;
  }

  &.skeleton__btn-full {
    width: 100%;
  }
}

/* FORM INPUTS */
.skeleton__input--text {
  border: 1px solid var(--light-gray);
  border-radius: var(--border-radius);
  height: 2rem;
  width: 100%;
}