.size {
  display: flex;
  align-items: center;
  gap: var(--ds-size-2);

  .bar {
    height: var(--ds-size-6);
    background-color: var(--ds-color-base-default);
    border-radius: 2px;
  }
}

.shadow {
  display: flex;
  align-items: center;
  gap: var(--ds-size-2);
  background-color: #fff;
  padding: var(--ds-size-3);
  border-radius: var(--ds-border-radius-md);
  height: 70px;
  width: 90px;

  .color {
    height: 100%;
    width: 100%;
    border-radius: var(--ds-border-radius-md);
    border: 1px solid #ebebeb;
  }
}

.radius {
  display: flex;
  align-items: center;
  height: var(--ds-size-6);
  width: 90px;
  aspect-ratio: 1;

  .bar {
    height: 100%;
    width: 100%;
    background-color: var(--ds-color-base-default);
  }
}

.border-width {
  display: flex;
  align-items: center;
  padding: var(--ds-size-3);
  border-radius: var(--ds-border-radius-md);
  background-color: #fff;
  height: 70px;
  width: 90px;
  aspect-ratio: 1;

  .bar {
    height: 100%;
    width: 100%;
    border-color: var(--ds-color-base-contrast-default);
    border-style: solid;
  }
}

.overflow-table {
  max-width: 100%;
  overflow-x: auto;

  @media (max-width: 768px) {
    max-width: 340px;
  }
}
