.nes-ui-container {
  position: relative;
  padding: 1.5rem 2rem;
  border-color: var(--color-black-absolute);
  border-style: solid;
  border-width: 4px; 
  background-color: var(--color-white);

  > :last-child {
    margin-bottom: 0;
  }

  &.nes-ui-is-center {
    text-align: center;
  }

  &.nes-ui-is-right {
    text-align: right;
  }

  &.nes-ui-with-title {
    > .nes-ui-title {
      display: table;
      padding: 0 0.5rem;
      margin: -1.8rem 0 1rem;
      font-size: 1rem;
      background-color: var(--color-white);
    }

    &.nes-ui-is-center {
      > .nes-ui-title {
        margin: -2rem auto 1rem;
      }
    }

    &.nes-ui-is-right {
      > .nes-ui-title {
        margin: -2rem 0 1rem auto;
      }
    }
  }
  position: relative;
  margin: var(--border-size);

  &.nes-ui-with-title {
    margin-top: 2em;
    > .nes-ui-title {
      top: -0.5rem;
      position: relative;
    }
  }

  &.nes-ui-is-rounded {

    @include pixel-borders(
      $corner-size: 1,
      $border-size: $border-size,
      $border-color: 'color-black-absolute',
      $border-inset-color: false
    );

    &.nes-ui-with-title {
      > .nes-ui-title {
        margin-top: -1.8rem;
      }

      &.nes-ui-is-centered {
        > .nes-ui-title {
          margin: -1.5rem auto 1rem;
        }
      }

      &.nes-ui-is-right {
        > .nes-ui-title {
          margin: -1.5rem 0 1rem auto;
        }
      }
    }
  }
}

.nes-ui-dark-mode {
 
  .nes-ui-container {
    color: var(--color-white);
    background-color: var(--color-black);
    border-color: var(--color-white-absolute); 

    &::after {
      position: absolute;
      top: -$border-size * 1.8;
      right: -$border-size * 1.8;
      bottom: -$border-size * 1.8;
      left: -$border-size * 1.8;
      z-index: -1;
      content: '';
      background-color: $base-color;
    } 

    &.nes-ui-with-title {
      
      margin-top: 2em;

      > .nes-ui-title {
        top: -0.5rem;
        position: relative;
        color: var(--color-white);
        background-color: var(--color-black);
      }
    }

    &.nes-ui-is-rounded { 
      @include pixel-borders(
        $corner-size: 1,
        $border-size: $border-size,
        $border-color: 'color-white-absolute',
        $border-inset-color: false
      );

      &::after {
        content: none;
      }

      &.nes-ui-with-title {
        > .nes-ui-title {
          margin-top: -1.8rem;
        }

        &.nes-ui-is-centered {
          > .nes-ui-title {
            margin: -1.5rem auto 1rem;
          }
        }

        &.nes-ui-is-right {
          > .nes-ui-title {
            margin: -1.5rem 0 1rem auto;
          }
        }
      }
    }
  }
}