.oak-empty {
    margin: 0 8px;
    font-size: 14px;
    line-height: 1.5715;
    text-align: center;

    &-image {
        height: 100px;
        margin-bottom: 8px;

        img {
            height: 100%;
        }

        svg {
            height: 100%;
            margin: auto;
        }
    }

    &-footer {
        margin-top: 16px;
    }

    &-normal {
        margin: 32px 0;
        color: var(--oak-text-color-disabled);

        .oak-empty-image {
            height: 40px;
        }
    }

    &-small {
        margin: 8px 0;
        color: var(--oak-text-color-disabled);

        .oak-empty-image {
            height: 35px;
        }
    }
}

.oak-empty-img-default {
      &-ellipse {
          fill: #f5f5f5;
          fill-opacity: 0.8;
      }

      &-path {
          &-1 {
              fill: #aeb8c2;
          }

          &-2 {
              fill: url('#linearGradient-1');
          }

          &-3 {
              fill: #f5f5f7;
          }

          &-4 {
              fill: #dce0e6;
          }

          &-5 {
              fill: #dce0e6;
          }
      }

      &-g {
          fill: var(--oak-font-white-1);
      }
  }

.oak-empty-img-default-dark {

      &-ellipse {
          fill: var(--oak-font-white-1);
          fill-opacity: 0.08;
      }

      &-path {
          &-1 {
              fill: #262626;
          }

          &-2 {
              fill: url('#linearGradient-1');
          }

          &-3 {
              fill: #595959;
          }

          &-4 {
              fill: #434343;
          }

          &-5 {
              fill: #595959;
          }
      }

      &-g {
          fill: #434343;
      }
  }


.oak-empty-img-simple {

        &-ellipse {
                fill: #f5f5f5;
            }
        
            &-g {
                stroke: #d9d9d9;
            }
        
            &-path {
                fill: #fafafa;
            }
  }


.oak-empty-img-simple-dark {

    &-ellipse {
            fill: var(--oak-font-white-1);
            fill-opacity: 0.08;
        }
    
        &-g {
            stroke: #434343;
        }
    
        &-path {
            fill: #262626;
            stroke: #434343;
        }
}