.nes-container {
  position: relative;
  padding: 1.5rem 2rem;
  border-color: black;
  border-style: solid;
  border-width: 4px;

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

  &.is-centered {
    text-align: center;
  }

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

  &.with-title {
    > .title {
      display: table;
      padding: 0 0.5rem;
      margin: -1.8rem 0 1rem;
      font-size: 1rem;
      background-color: $background-color;
    }

    &.is-centered {
      > .title {
        margin: -2rem auto 1rem;
      }
    }

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

  &.is-dark {
    position: relative;
    margin: $border-size;
    color: $background-color;
    background-color: $base-color;
    border-color: white;

    &::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;
    }

    &.with-title {
      > .title {
        color: $background-color;
        background-color: $base-color;
      }
    }
  }

  &.is-rounded {
    @include rounded-corners();

    padding: 1rem 1.5rem;
    margin: $border-size;

    &.with-title {
      > .title {
        margin-top: -1.5rem;
      }

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

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

    &.is-dark {
      @include rounded-corners(true);
      &::after {
        content: none;
      }

      &.with-title {
        > .title {
          margin-top: -1.3rem;
        }

        &.is-centered {
          > .title {
            margin: -1.3rem auto 1rem;
          }
        }

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