/*
 * box
 */

/*
 * padding
 */
.define-padding(@nums-1-100) !important;

/*
 * margin
 */
.define-margin(@nums-1-100) !important;
.define-negative-margin(@nums-1-32) !important;
.ml-auto, .mla { margin-left: auto !important; }
.mr-auto, .mra { margin-right: auto !important; }
.mt-auto, .mta { margin-top: auto !important; }
.mb-auto, .mba { margin-bottom: auto !important; }
.mx-auto, .mxa { .ml-auto; .mr-auto; }

.mb0-last {
  &:last-child {
    margin-bottom: 0 !important;
  }
}
.mr0-last {
  &:last-child {
    margin-right: 0 !important;
  }
}

/*
 * border
 */
.border {
  border-style: solid;
  border-width: 1px;
  border-color: var(--border-color);
}
.border-top {
  border-top-style: solid;
  border-top-width: 1px;
  border-color: var(--border-color);
}
.border-right {
  border-right-style: solid;
  border-right-width: 1px;
  border-color: var(--border-color);
}
.border-bottom {
  border-bottom-style: solid;
  border-bottom-width: 1px;
  border-color: var(--border-color);
}
.border-left {
  border-left-style: solid;
  border-left-width: 1px;
  border-color: var(--border-color);
}
.border-dark {
  border: 1px solid rgba(0, 0, 0, 0.1);
}
.border-light {
  border: 1px solid rgba(255, 255, 255, 0.1);
}

// border-style
each(none hidden solid double groove ridge inset outset dashed dotted, {
  .border-style-@{value} {
    border-style: @value;
  }
});

.border-style-dashed {
  border-style: dashed;
}

.outline-none {
  outline: none;
}

.border-top-only-last {
  &:last-child {
    .border-top;
  }
}
.border-right-only-last {
  &:last-child {
    .border-right;
  }
}
.border-bottom-only-last {
  &:last-child {
    .border-bottom;
  }
}
.border-left-only-last {
  &:last-child {
    .border-left;
  }
}


.border-top-not-last {
  &:not(:last-child) {
    .border-top;
  }
}
.border-right-not-last {
  &:not(:last-child) {
    .border-right;
  }
}
.border-bottom-not-last {
  &:not(:last-child) {
    .border-bottom;
  }
}
.border-left-not-last {
  &:not(:last-child) {
    .border-left;
  }
}

// font-weight
.for(@nums-1-32, {
  .border-width-@{value}, .bw@{value} { border-width: @value * 1px; }
});

.border-none {
  border: none !important;
}

.border-none-last {
  &:last-child {
    border: none !important;
  }
}

.border-width-0-last, .bw0-last {
  &:last-child {
    border-width: 0 !important;
  }
}

/*
 * border-radius
 */
.circle {
  border-radius: 50%;
}
.rounded {
  border-radius: 3px;
}
.rounded-full {
  border-radius: 9999px;
}
.rounded-top-right-full {
  border-top-right-radius: 9999px !important;
}
.rounded-top-left-full {
  border-top-left-radius: 9999px !important;
}
.rounded-bottom-right-full {
  border-bottom-right-radius: 9999px !important;
}
.rounded-bottom-left-full {
  border-bottom-left-radius: 9999px !important;
}
.define-rounded(1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 100);

/*
 * rect を定義
 */
.define-rect(square, 1, 1);
.define-rect(rect, 3, 2);
.define-rect(rect-16_9, 16, 9);
.define-rect(rect-3_2, 3, 2);
.define-rect(rect-4_3, 4, 3);
.define-rect(rect-5_4, 5, 4);
.define-rect(rect-7_5, 7, 5);
.define-rect(rect-ogp, 1200, 630);

// aspect-ratio
.define-aspect-ratio(aspect-ratio-square, 1, 1);
.define-aspect-ratio(aspect-ratio-16_9, 16, 9);
.define-aspect-ratio(aspect-ratio-3_2, 3, 2);
.define-aspect-ratio(aspect-ratio-4_3, 4, 3);
.define-aspect-ratio(aspect-ratio-5_4, 5, 4);
.define-aspect-ratio(aspect-ratio-7_5, 7, 5);


/*
 * safa-area for ios
 */

// padding
.pt-safe {
  padding-top: env(safe-area-inset-top);
}
.pr-safe {
  padding-right: env(safe-area-inset-right);
}
.pb-safe {
  padding-bottom: env(safe-area-inset-bottom);
}
.pl-safe {
  padding-left: env(safe-area-inset-left);
}
.p-safe {
  .pt-safe;
  .pr-safe;
  .pb-safe;
  .pl-safe;
}

// margin
.mt-safe {
  margin-top: env(safe-area-inset-top);
}
.mr-safe {
  margin-right: env(safe-area-inset-right);
}
.mb-safe {
  margin-bottom: env(safe-area-inset-bottom);
}
.ml-safe {
  margin-left: env(safe-area-inset-left);
}
.m-safe {
  .mt-safe;
  .mr-safe;
  .mb-safe;
  .ml-safe;
}

// position
.t-safe {
  top: env(safe-area-inset-top);
}
.r-safe {
  right: env(safe-area-inset-right);
}
.b-safe {
  bottom: env(safe-area-inset-bottom);
}
.l-safe {
  left: env(safe-area-inset-left);
}
.trbl-safe {
  .t-safe;
  .r-safe;
  .b-safe;
  .l-safe;
}