/*
Framework
 - Header
 - Footer
*/

@import "base/config";
@import "base/mixins";
@import "base/direction";

// loading
.d-loading {
  position: absolute;
  left: 0;
  right: 0;
  top: 0;
  bottom: 0;
  z-index: 1;

  &:before {
    --alpha-change-color-light-1: inherit;
    content: "";
    position: absolute;
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
    background: var(--alpha-change-color-light-1);
    opacity: 0.6;
  }

  &.small i {
    // position: absolute;
    left: calc(50% - 10px);
    top: calc(50% - 10px);
    width: 20px;
    height: 20px;
  }

  i {
    position: absolute;
    left: calc(50% - 17px);
    top: calc(50% - 17px);
    width: 34px;
    height: 34px;
    border: 2px solid transparent;
    border-top-color: var(--alpha-primary-color, #26c);
    border-radius: 50%;
    animation: spin 0.75s infinite linear;

    &:before {
      content: "";
      top: -2px;
      left: -2px;
      position: absolute;
      width: inherit;
      height: inherit;
      border: inherit;
      border-radius: inherit;
      animation: spin 1.5s infinite ease;
    }
  }
}

form.d-loading {
  opacity: 0.3;
}

.list-type-none {
  list-style: none;
  padding-#{$left}: 0;
}

.list-type-check {
  list-style: none;
  margin-#{$left}: 0;

  li {
    position: relative;
    padding-#{$left}: 2em;
    margin-bottom: 1.1rem;
    line-height: 2;

    &::before {
      position: absolute;
      display: block;
      #{$left}: 0;
      content: "\e969";
      font-family: #{$theme-font};
      font-weight: 700;
    }
  }
}

.list-type-round-check {
  li {
    &::before {
      content: "\e921";
      font-family: #{$theme-font};
      font-size: 1.1em;
    }
  }
}

.divider {
  display: inline-block;
  vertical-align: middle;
  height: 2.5rem;
  width: 1px;
  background-color: var(--alpha-light-color);
}

.close-icon {
  display: block;
  position: relative;
  width: 1em;
  height: 1em;
  transform: rotateZ(45deg);

  &::before,
  &::after {
    display: block;
    position: absolute;
    background-color: var(--alpha-change-border-color);
    content: "";
    transition: transform 0.3s;
  }

  &::before {
    height: 0.067em;
    width: 100%;
    #{$left}: 0;
    top: calc(50% - 0.033em);
  }

  &::after {
    height: 100%;
    width: 0.067em;
    top: 0;
    #{$left}: calc(50% - 0.033em);
  }

  a:hover > & {
    &:before {
      transform: rotate(-45deg);
    }

    &:after {
      transform: rotate(45deg);
    }
  }
}