/* 調整用のユーティリティクラスで、Figmaで定義されている標準コンポーネントのデザイン調整時に共通的に使用されるCSSを定義 */

/* space系 */
.ui-u-ml-auto {
  margin-left: auto;
}

.ui-u-mr-xs {
  margin-right: var(--spacing-xs);
}

.ui-u-mr-xxs {
  margin-right: var(--spacing-xxs);
}

.ui-u-mt-xxs {
  margin-top: var(--spacing-xxs);
}

.ui-u-mt-xs {
  margin-top: var(--spacing-xs);
}

.ui-u-mt-s {
  margin-top: var(--spacing-s);
}

.ui-u-mt-m {
  margin-top: var(--spacing-m);
}

.ui-u-mt-l {
  margin-top: var(--spacing-l);
}

.ui-u-mt-auto {
  margin-top: auto;
}

.ui-u-mt-10 {
  margin-top: 10px;
}

.ui-u-mb-s {
  margin-bottom: var(--spacing-s);
}

.ui-u-mb-xs {
  margin-bottom: var(--spacing-xs);
}

.ui-u-mb-l {
  margin-bottom: var(--spacing-l);
}

.ui-u-w-full {
  width: 100%;
}

.ui-u-h-full {
  height: 100%;
}

/* width/height系 */
.ui-u-w-226 {
  width: 226px;
}

.ui-u-w-500 {
  width: 500px;
}

/* Flex系 */
.ui-u-flex-row {
  display: flex;
  flex-direction: row;
}

.ui-u-flex-column {
  display: flex;
  flex-direction: column;
}

.ui-u-gap-xxs {
  gap: var(--spacing-xxs);
}

.ui-u-gap-xs {
  gap: var(--spacing-xs);
}

.ui-u-gap-s {
  gap: var(--spacing-s);
}

.ui-u-gap-m {
  gap: var(--spacing-m);
}

.ui-u-flex-grow {
  flex-grow: 1;
}

.ui-u-justify-center {
  justify-content: center;
}

.ui-u-justify-space-between {
  justify-content: space-between;
}

.ui-u-align-self-stretch {
  align-self: stretch;
}

/* センタリング */
.ui-u-align-center {
  align-items: center;
}

.ui-u-margin-inline-auto {
  margin-inline: auto;
}

.ui-u-text-center {
  text-align: center;
}

.ui-u-text-end {
  text-align: end;
}

.ui-u-align-self-center {
  align-self: center;
}

.ui-u-justify-flex-end {
  justify-content: flex-end;
}

/* position系 */
.ui-u-relative {
  position: relative;
}

.ui-u-absolute {
  position: absolute;
}

/* text系 */
.ui-u-text-nowrap {
  white-space: nowrap;
}

.ui-u-text-bold {
  font-weight: 700;
}

.ui-u-text-ellipsis {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

/* 色系 */
.ui-u-bg-white {
  background-color: var(--white);
}

.ui-u-icon-primary {
  filter: invert(28%) sepia(94%) saturate(4169%) hue-rotate(198deg)
    brightness(98%) contrast(101%);
}

.ui-u-icon-disabled {
  filter: invert(63%) sepia(0%) saturate(0%) hue-rotate(144deg) brightness(96%)
    contrast(85%);
}

/* display系 */
.ui-u-display-inline-block {
  display: inline-block;
}

.ui-u-display-none {
  display: none;
}

/* icon系 */
.ui-u-icon-18 {
  width: 18px;
  height: 18px;
}

.ui-u-icon-21 {
  width: 21px;
  height: 21px;
}